CODEWITHSUNDEEP
javascriptwebflexslider
user822179
user822179

Reputation: 129

Flexslider infinite loop

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>

Upvotes: 7

Views: 18612

Answers (2)

sifriday
sifriday

Reputation: 4462

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.

Upvotes: 0

kingkode
kingkode

Reputation: 2220

set the animationLoop to true as opposed to false

Upvotes: 6

Related Questions