i am trying to do not show slide 1 in carousel bootstrap any one please help me :  *i am trying to not show first slide after loading the page but dont know what to do and how to do so any one can give me any solution about this *

    

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- banner starts here -->
    <div class=" slider header">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner slider">
          <div class="item active slider">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Cap-ferrat-coast-from-mt-b_crop_1200x400.jpg/800px-Cap-ferrat-coast-from-mt-b_crop_1200x400.jpg" alt="1">
          </div>
          <div class="item slider">
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mount_Fuji_as_seen_across_lake_Kawaguchi%2C_with_Fujikawaguchiko_town_in_the_foreground_seen_early_in_the_evening._Honshu_Island._Japan.jpg" alt="2">
          </div>
          <div class="item slider" id>
            <img src="https://vignette.wikia.nocookie.net/greatwar/images/c/c3/7f720cbede625085e7ccd46503c944aa-d5b1ubs.jpg/revision/latest/scale-to-width-down/639?cb=20121118022453" alt="3">
          </div>
        </div>
        <!-- Left and right controls -->
        <a class=" left carousel-control" data-target="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class=" right carousel-control" data-target="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    <!-- banner ends here -->

<!-- end snippet -->

i am not able to understand what to do and how to do just wanna do this
i dont think so it was tough but i dont got this 
i just dont wanna show the first slide again after runing all three slides 
after the third slide 2nd slide will be show