BX slider, transition from first to last slide flickers(goes right then come back to original)

Question

Following is my code for simple implementation for BX slider:

var slider = $('#bxslider').bxSlider();

<ul id="bxslider">
    <li>
        <img class="carouselimage" src="images/01e_image.jpg" />

    </li>
    <li >
        <img class="carouselimage" src="images/01c_image.jpg" />

    </li>
    <li >
        <img class="carouselimage" src="images/01a_image.jpg" />

    </li>
</ul>

I've used everything correctly, no extra CSS and JS.

While I make the transition by clicking left arrow from first to last (reverse), the last slide goes towards the right out of the container for a sec and comes back to original, looks like a flickering.

Anybody got any clue?

Thanks in advance.

score 12 · Answer 1 · answered Nov 10 '15 at 10:33

12

I fix it that way:

$('.bxslider').bxSlider({ auto: true, useCSS: false });

(thanks to stevenwanderski on https://github.com/stevenwanderski/bxslider-4/issues/127)

answered Nov 10 '15 at 10:33

Liza Basova

121
1
3

score 4 · Answer 2 · edited May 23 '17 at 12:32

4

My co-worker had this issue, she used this on bxslider

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

See here iPhone WebKit CSS animations cause flicker

edited May 23 '17 at 12:32

Community

1
1

answered Nov 13 '15 at 09:43

Satbir Kira

792
6
21

score 3 · Accepted Answer · answered Sep 16 '14 at 11:49

i got this fixed.. if anyone else needs..

i've added

"if (0===value) value=-40;// fix for flickering issue 2208141730"

in following function, you can find this function in BxSlider v4.1.2(jquery.bxslider.js) at line no. 535 and above fix is added at line no. 539

var setPositionProperty = function(value, type, duration, params){
    // use CSS transform
    if(slider.usingCSS){
        // determine the translate3d value
        if (0===value) value=-40;// fix for flickering issue 2208141730

It is so wrong to modify a plugin. Have you made a pull request on github ? — Carlo, May 14 '15 at 08:36

score 0 · Answer 4 · answered Apr 17 '19 at 10:42

Update this in bxslider plugin:

var setPositionProperty = function(value, type, duration, params){
  // use CSS transform
  if(slider.usingCSS){
    // determine the translate3d value
    var propValue = slider.settings.mode == 'vertical' ? 'translateX(' + value + 'px)' : 'translateX(' + value + 'px)';

Add new css

.bx-viewport ul{
   backface-visibility: visible;
   perspective: 2000;
   -webkit-perspective: 2000;
   -webkit-backface-visibility: visible;
}

BX slider, transition from first to last slide flickers(goes right then come back to original)

4 Answers4