引导程序过渡到加载时的最后一个滑块

Question

I want to show the last slider as 1st item in bootstrap carousal.I have x number of slides(dynamic slide).I want to load last slide on load.now It shows 1st item on load.

<div id="myCarousel" class="carousel slide" style="width:450px">
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="item active"><img src="img/IMG_2.jpg"></div>                
            <div class="item"><img src="img/IMG_3.jpg"></div>
            <div class="item"><img src="img/IMG_1.jpg"></div>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div>   
    <script>
        $('#myCarousel').carousel({
        interval: 4000,
        scroll:last //need to change here
        })
    </script>

Answer 1

Add active class to the last item like,

 $('#myCarousel').carousel({ interval: 4000, }); $('#myCarousel').find('.item:last').addClass('active') 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script> <div id="myCarousel" class="carousel slide" style="width:450px"> <!-- Carousel items --> <div class="carousel-inner"> <div class="item"><img alt="img/IMG_2.jpg"></div> <div class="item"><img alt="img/IMG_3.jpg"></div> <div class="item"><img alt="img/IMG_1.jpg"></div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div> </div>