Search code examples
flexslider

Flexslider - Navigation "one-by-one" - one click on arrow / one swipe / one keypress = movement of only one image

I'm using Flexslider for a project of gallery and I want to modify the navigation system. On keypress/swipe/click on arrows, four images displayed disappear and are replaced by four new.

Is it possible to modify the behavior of the navigation to move images one by one ?

Thank you very much for your help !

Z.

Solution

  • You may want to use property move, which is defined as

    //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.

    So, your code will look like this

    $(window).load(function() {
    $('.slidewidget1').flexslider({
         animation: "slide",
        animationLoop: true,
        itemWidth: 210,
        controlNav: false,
        itemMargin: 0,
        slideshow: false,
        move: 1,
        minItems = 4,
        maxItems = 4
    });  
});

    plus, of course, your customization of width, etc.

    Documentation