bootstrap 监听轮播图的索引

时间:2021-08-12
本文章向大家介绍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)
 })

原文地址:https://www.cnblogs.com/laid/p/15132008.html