Why does bxSlider break my transition between last and first slide?

Question

I'm using bxSlider, for each slide I have several HTML elements not just an image. I need to make the active slide bigger than the others, I already accomplished that using css zoom and transition, but when I move from the first slide to the second slide or from the second one to the first one, my transition is missing, I mean it only grows up but it doesn't do the animation, it's ok for all the other slides, does anyone know why this transition breaks?

This is my code

$('#sliderTrend').bxSlider({
            slideWidth: 300,
            minSlides: 1,
            maxSlides: 3,
            moveSlides: 1,
            slideMargin: 3,
            pager: false,
            onSliderLoad: function () {
                $('#sliderTrend>div:not(.bx-clone)').eq(1).addClass('active-slide');
                $('#sliderTrend>div:not(.bx-clone)').eq(1).removeClass('inactive-slide');
            },
            onSlideBefore: function ($slideElement, oldIndex, newIndex) {
                $('.slideC2').removeClass('active-slide');
                $('.slideC2').addClass('inactive-slide');
                $($slideElement).next().removeClass('inactive-slide');
                $($slideElement).next().addClass('active-slide');
            }
        });

And these are my css classes

.active-slide {
    zoom:100%;
    margin-top:0px;
    -moz-transition:  zoom 150ms linear, margin-top 150ms linear;
    -webkit-transition:  zoom 150ms linear, margin-top 150ms linear;
    -o-transition: zoom 150ms linear, margin-top 150ms linear;
    transition: zoom 150ms linear, margin-top 150ms linear;
}

.inactive-slide {
    zoom:75%;
    margin-top:60px;
    -moz-transition:  zoom 150ms linear, margin-top 150ms linear;
    -webkit-transition:  zoom 150ms linear, margin-top 150ms linear;
    -o-transition: zoom 150ms linear, margin-top 150ms linear;
    transition: zoom 150ms linear, margin-top 150ms linear;    
}

Answer 1

SO36637125

Why does bxslider breaks my transition between last and first slide?

It's hard to be certain with bxSlider, it's a very flexible yet temperamental plugin. I believe it was the callbacks were too much. Every slider was removing and adding 2 classes all at once, which isn't healthy behavior for a single thread language like JavaScript.

When dealing with active and inactive states, you should know that bxSlider has it's own .active class and the active slider is always going to be the slide on the left, not the middle. So taking that into account, this is whats been done:

• Removed the .inactive-slide class. Instead of having two states to deal with, use an active state, and use the default state (which is how slides are normally).

• Changed the .active-slide class to .act because it saves time typing less. Changed the CSS rules to:

    .act {
       transition-duration: 1s;
       transition-timing-function: ease-in;
       transform: scale(2);
       transform-origin: center center;
       z-index: 9999999;
    }
  

  • Using z-index to overlap the slides to the right and left.

  • Notice there's no position property. That's because by default each slide is position: relative.

  -For details on the animation properties, you can find it here.

• Removed the onSliderLoad callback because it's flaky. I've used bxSlider for a couple of years, and I have only been able to get it to work a few times.

• Changed the onSlideBefore callback to simplify it:

    onSlideBefore: function($ele, from, to) {
       var $act = $ele.next();
       $act.addClass('act');
       $act.siblings().removeClass('act');
    }
  

  • The first line basically references the real active slider that is positioned on the left (i.e. $ele) and targets the next slide after the active slide so now the .act class will be assigned to the middle slide.
  • The second line .addClass('act') to the middle slide (i.e. $act).
  • The last line ensures that there's only one $act slide by using .siblings() to remove .act class from every slide except $act.
  • This works because there's only one class to handle.

README.md

PLUNKER