1. 程式人生 > 其它 >bootstrap 監聽輪播圖的索引

bootstrap 監聽輪播圖的索引

如:

<div id="carouselExampleCaptions001"  class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" style="height: 100%;">
													
	<div class="carousel-item active" >
		<img src="img/page4-swiper07.png" >									
	</div>
	<div class="carousel-item" >
	     <img src="img/page4-swiper09.png" >									
	</div>
	<div class="carousel-item" >
		<img src="img/page4-swiper04.png" >									
	</div>
	<div class="carousel-item" >
		<img src="img/page4-swiper06.png" >									
	</div>											
  </div>
</div>

  

$('#carouselExampleCaptions').on('slide.bs.carousel', function (event) {
              var $hoder = $('#carouselExampleCaptions').find('.carousel-item'),
              $items = $(event.relatedTarget);
              //getIndex就是輪播到當前位置的索引
              var getIndex= $hoder.index($items);
               
console.log(getIndex) })