Flexslider infinite loop

Question

Need to fix the home page slider so it doesn't fly back through all slides at the end. Needs to be a seamless loop. But I don't know what I am doing wrong. Example: http://3dollar.vigorbranding.com/

<script type="text/javascript">
    jQuery(window).load(function() {
        jQuery('#carousel').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: true,
            itemWidth: 187,
            itemMargin: 0,
            asNavFor: '#slider'
        });

        jQuery('#slider').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: true,

            <?php if (ot_get_option('autoslide') == 'yes') { ?>

            slideshow: true,                //Boolean: Animate slider automatically
            slideshowSpeed: <?php echo ot_get_option('delay') ?>, 

            <?php } else { ?>
            slideshow: false,  
            <?php }  ?>

            sync: "#carousel",
            start: function(slider) {
                jQuery('body').removeClass('loading');
            }
        });

    });
</script>

score 6 · Answer 1 · answered Apr 01 '13 at 15:04

6

set the animationLoop to true as opposed to false

answered Apr 01 '13 at 15:04

kingkode

2,220
18
28

Did that too and the navigation at the bottom gets stuck. – user822179 Apr 01 '13 at 15:08
yea that is odd.. seems that the sync is off now.. a quick solution is to set the `animationLoop` back to `false` and change the `animation` to `fade`.. that way, the images will crossfade and will give that seamless feel without sliding.. ill look into the issue a bit more to find a solid solution.. – kingkode Apr 01 '13 at 15:27
also found this [issue report on github](https://github.com/woothemes/FlexSlider/issues/331) about users experiencing the same thing when sync and animationloop are both set.. – kingkode Apr 01 '13 at 15:29
Awesome! There is always a workaround. I am glad it worked out for you. it looks good too. nice job on the whole site design btw. – kingkode Apr 01 '13 at 20:48

score 0 · Answer 2 · answered Jul 31 '14 at 14:00

I just had this same debate. animationLoop: true wasn't enough for me... I read the thread on this issue here:

https://github.com/woothemes/FlexSlider/issues/287

and based on recommendations in this thread, I ended up converting to bxSlider:

http://bxslider.com/examples/carousel-dynamic-number-slides

which not only does the infinite loop perfectly, but its sizing model seems more intuitive; I have been able to align it with my grid more easily. If you think of:

[   item    ][mgn][   item    ][mgn][   item    ][mgn][   item    ][mgn]

(where mgn = margin)

then in flexslider if I adjust the item width and margin so that the slider is fully-justified:

[       page width            ]
[   item    ][mgn][   item    ][mgn][   item    ][mgn][   item    ][mgn]

then once I had scrolled to the RH edge there was still a 'ghost slide' lurking off the RH edge that was the trailing margin:

                                    [       page width            ]
[   item    ][mgn][   item    ][mgn][   item    ][mgn][   item    ][mgn]
                                                         ghost slide ^

bxSlider accounts for this perfectly.

Flexslider infinite loop

2 Answers2