Question

我目前正在使用bxSlider，我遇到无限循环问题。我添加了类去了div点击，如果你单击下一个或上一个按钮，addClass正在使用下一个div。但问题是，在显示div为1到5然后是第二个循环时，addClass不起作用。我在bxSlider中读了很多无限循环的问题，但我不确定它和我的问题是一样的。如果有人和我有同样的问题请分享。

	$(document).ready(function(){
		$('.bxslider').bxSlider({
			useCSS:false,
			pager: false,
			startSlide:0,
			minSlides:1,
			maxSlides:3,
			moveSlides:1,
			slideWidth: 170,
			slideMargin: 10,
			infiniteloop: true,
			useCSS: false,
		});	
		
		
		//click div 
		$(".bxslider div").on("click", function(){
			var $this = $(this);
			$('.bxslider div.slide.on').removeClass('on');
			$this.addClass('on')
		});
		
		//click before button
		$('.bx-wrapper .bx-prev').on("click touched", function(){
			var next = $('.bxslider div.slide.on');
			$('.bxslider div.slide.on').removeClass('on');
			next.prev().addClass('on');
		});
		
		//click next button
		$(".bx-wrapper .bx-next").on("click touched", function(){
			var next = $('.bxslider div.slide.on');
			$('.bxslider div.slide.on').removeClass('on');
			next.next().addClass("on");
		});
	});

	<style>
		.bxslider {}
		.bxslider div.slide {height:100px;background-color:#ededed;}
		.bxslider div.slide.on{background-color:#ff8888;}
	</style>

	<div class="bxslider">
		<div class="slide on"><span>slide01</span></div>
		<div class="slide"><span>slide02</span></div>
		<div class="slide"><span>slide03</span></div>
		<div class="slide"><span>slide04</span></div>
		<div class="slide"><span>slide05</span></div>
	</div>

Answer 1

第二个循环不起作用的原因是因为当bxSlider设置为infiniteloop时会创建滑块克隆。详细信息在Snippet中进行了评论。

<强>段

$(document).ready(function() {

  // Store bxSlider object for easy access to methods
  var bx = $('.bxslider').bxSlider({
    useCSS: false,
    pager: false,
    startSlide: 0,
    minSlides: 1,
    maxSlides: 3,
    moveSlides: 1,
    slideWidth: 170,
    slideMargin: 10,
    infiniteloop: true,

    /* Next 5 options are touch related features
    || BTW, there's no such event called touched.
    || Use these options instead of registering
    || bxSlider to events, use the bxSlider API
    || callbacks
    */
    touchEnabled: true,
    swipeThreshold: 50,
    oneToOneTouch: true,
    preventDefaultSwipeX: true,
    preventDefaultSwipeY: false,

    /* Use a callback: Right before the transition to the
    || next slide has ended...
    */
    onSlideBefore: activate,
  });

  /* ...call activate function to handle class 
  || toggling of slides
  */
  function activate($ele, from, to) {

    // Remove the .on class from ALL SLIDES
    $('.slide').removeClass('on');

    // Add .on class to the next .slide
    $ele.addClass('on');
  }
});

.bxslider {}

.bxslider div.slide {
  height: 100px;
  background-color: #ededed;
}

.bxslider div.slide.on {
  background-color: #ff8888;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">




<div class="bxslider">
  <div class="slide on"><span>slide01</span></div>
  <div class="slide"><span>slide02</span></div>
  <div class="slide"><span>slide03</span></div>
  <div class="slide"><span>slide04</span></div>
  <div class="slide"><span>slide05</span></div>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/g/bxslider@4.2.12(jquery.bxslider.min.js+vendor/jquery.fitvids.js)"></script>

带有addClass问题的bxslider infiniteloop

1 个答案: