Search code examples
javascriptjquerycssbxslider

bxslider: vert. slides goes to far and then self-adjusts

Using bxslider, the contents go to far to the right or left and then snap back in place. This happens more when clicking the 'prev' button.

I've seen this answer, but 'box-sizing' didn't fix it.

Here is a fiddle - In it I don't use the bxslider css file, I've added before and it makes no difference. I've stripped this down to bare bones and it still goes to far and then snaps back in place.

Each li has multiple div's in it. The CSS is:

div.swatches {
width: 22px;
height: 30px;
margin: 0px 3px;
border: 1px solid #CCC;
display: inline-block;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
cursor: pointer;
}
Solution

  • bxSlider calculates slide positions dynamically with the best dimensions it can get from the parent element. Sometimes you get this weirdness. Try to specify slide width and number of slides, this would make bxSlider calculate positions with more precision. This should fix your issue:

    $('.bxslider').bxSlider({
        pager: false,
        speed:1300,
        maxSlides:2,
        slideWidth:600
 });

    Your updated fiddle: https://jsfiddle.net/8ayxpeL9/3/