Search code examples
javascriptsliderfade

bxslider horizontal effect fade


Help to make the slider scrolls blocks but they fade when adding options fade is only one block.

enter jsfiddle.net

<div class="slider1">
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div>
</div>

 $(document).ready(function(){
  $('.slider1').bxSlider({
    slideWidth: 200,
    minSlides: 2,
    maxSlides: 3,
    slideMargin: 10
  });
});

Solution

  • I solved the problem with a single slider

    http://jsfiddle.net/5znhaabw/

    onSlideNext: function (eSlide, iIndPrev, iIndCur) {
      var eSlideCur = eSlide.children(),
          eSlidePrev = eSlide.prev().children();
    
      if (iIndCur == 0) {
        eSlidePrev = eSlide.siblings().last().prev().children();
        eSlideCur = eSlide.siblings().last().children().add(eSlide.children());
      };
      eSlideCur.stop().css('opacity', 0).delay(350).animate({opacity: 1}, 300);
      eSlidePrev.stop().animate({opacity: 0}, 300);
    },
      onSlidePrev: function (eSlide, iIndPrev, iIndCur) {
        var eSlideCur = eSlide.children(),
            eSlidePrev = eSlide.next().children();
    
        if (iIndCur == eSlide.siblings().andSelf().length - 2 - 1) {
          eSlidePrev = eSlide.siblings().first().next().children();
          eSlideCur = eSlide.siblings().first().children().add(eSlide.children());
        };
        eSlideCur.stop().css('opacity', 0).delay(350).animate({opacity: 1}, 300);
        eSlidePrev.stop().animate({opacity: 0}, 300);
      }

    I think you can use onSlideBefore()