javascript - 加载时引导过渡到最后一个 slider

Question

我想在 bootstrap carousal 中将最后一个 slider 显示为第一项。我有 x 个幻灯片(动态幻灯片)。我想在加载时加载最后一张幻灯片。现在它在加载时显示第一个项目。

<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

将 active 类添加到最后一项，例如，

$('#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>