Web App Development

Updating Flexslider settings after initialization

Flexslider is a jQuery carousel plugin that transforms a list in the DOM tree into an interactive slider.

Changing Flexslider options after setup

Flexslider passes a slider argument to its handler function like start or after. This has a vars property that contains the values that were passed at initialization.

	start: function(slider){

You can now update some of the value, assuming they don’t require immediate updates.

Vars property

Jumping to a different slide without animation

This allows us to disable transitions in the slider and move around without user-visible delays. We just set the animationSpeed to 0, move to the correct slide and then revert animationSpeed to the previous value:

var animationSpeed = slider.vars.animationSpeed;
slider.vars.animationSpeed = 0;
slider.flexAnimate(0); // go back to the first slide
slider.vars.animationSpeed = animationSpeed;

Follow me on Twitter
I'm building monitoring tool for site speed and Core Web Vitals.
➔ Start monitoring your website or run a free site speed test