2017-06-02 61 views
1

我想顯示最後一個滑塊作爲bootstrap carousal中的第一項。我有x個幻燈片(動態幻燈片)。我想加載最後一張幻燈片load.now它顯示第一個項目上加載。自舉過渡到負載上的滑塊

<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> 
+0

如果你想顯示在加載最後一張幻燈片,你爲什麼不能把它作爲第一個項目?我明白,這是你在問題中提到的動態。如果它是動態的,只需將其顛倒即可。 –

回答

2

添加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>

+0

我想添加'積極jquery' – user3386779

+0

嘗試我更新的答案。 –