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>

Cromorne

Answer 1

set the animationLoop to true as opposed to false

Fortyish

Did that too and the navigation at the bottom gets stuck. – Cromorne

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.. – Fortyish

also found this issue report on github about users experiencing the same thing when sync and animationloop are both set.. – Fortyish

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. – Fortyish

Answer 2

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.

Inquest