bxslider infiniteloop with addClass issue

Question

i'm currently using bxSlider and i have a problem with infinite loop. i added class went div is clicked and if you click next or previous button, addClass is working with the next div. but the problem is that after it showed div of 1 to 5 and then when it's 2nd cycle, addClass doesn't work. i'v read many questions with infinite loop in bxSlider but i'm not sure it is same problem as mine. if anyone had same issues with me please share.

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

The reason why the second cycle wasn't working is because bxSlider will create clones of sliders when it's set to infiniteloop. Details are commented in Snippet.

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>