How to change slideshow speed on for each individual slide using Flexslider?

Question

I'm using Wordpress to create a homepage slideshow using Flexslider. I already have created the options for the ability to type in the slideshow speed. How can I loop through those slideshow speeds for each individual slide?

$options[] = array( "name" => __('Banner 1 Speed','themetrust'),
                    "desc" => __('Enter speed in seconds for banner 1.','themetrust'),
                    "id" => "ttrust_home_banner_speed1",
                    "type" => "text");  
$options[] = array( "name" => __('Banner 2 Speed','themetrust'),
                    "desc" => __('Enter speed in seconds for banner 2.','themetrust'),
                    "id" => "ttrust_home_banner_speed2",
                    "type" => "text");


<?php $slideshow_delay = of_get_option('ttrust_slideshow_delay'); ?>
<?php $autoPlay = ($slideshow_delay != "0") ? 1 : 0; ?>
<?php $slideshow_effect = of_get_option('ttrust_slideshow_effect'); ?>

<script type="text/javascript">
//<![CDATA[

jQuery(window).load(function() {            
    jQuery('.flexslider').flexslider({
        slideshowSpeed: <?php echo $slideshow_delay . '000'; ?>,  
        directionNav: true,
        slideshow: <?php echo $autoPlay; ?>,                                
        animation: '<?php echo $slideshow_effect; ?>',
        animationLoop: true
    });  
});

//]]>
</script>

Answer 1

I'm pretty sure that this is not a feature supported from FlexSlider, so here's a way to get-around this:

<?php $speed1 = intval( of_get_option( 'ttrust_home_banner_speed1' ) );
$speed2 = ( of_get_option( 'ttrust_home_banner_speed2' ) );
$speed1 = $speed1 ? $speed1 * 1000 : 6000; // Default duration of 6 seconds
$speed2 = $speed2 ? $speed2 * 1000 : 6000; // Default duration of 6 seconds

$slideshow_effect = of_get_option('ttrust_slideshow_effect'); ?>

<script type="text/javascript">
//<![CDATA[

jQuery(window).load(function() {
    var delays = [ <?php echo $speed1; ?>, <?php echo $speed2; ?> ],
        _curr_index = 0,
        _delay = false, 
        _aa_timeout = null,
        _auto_advancing = false;

    jQuery('.flexslider').flexslider({
        slideshowSpeed: 0,
        directionNav: true,
        slideshow: false,
        animation: '<?php echo $slideshow_effect; ?>',
        animationLoop: true,
        after: function( slider ){
            // If we weren't advancing to the next slide from the auto_advance_slide() function(from user controls for instance), we need to fix some things
            if ( ! _auto_advancing ) {
                clearTimeout( _aa_timeout ); // Clear the auto advance timeout
                _curr_index = slider.currentSlide; // Fix the current index
            };
            // Set-up the next timer for auto advancing
            auto_advance_slide();
        }
    });

    function auto_advance_slide() {
        if ( typeof( delays[ _curr_index ] ) != 'undefined' ) {
            _delay = delays[ _curr_index ];
        } else {
            _delay = delays[ 0 ];
            _curr_index = 0;
        };

        // Set time out to switch to next slide
        _aa_timeout = setTimeout( function(){
            _auto_advancing = true;
            // Switch to next slide.
            jQuery('.flexslider').flexslider('next');

            _auto_advancing = false;
        }, _delay );

        // Increase the current index. 
        _curr_index ++;
    }

    auto_advance_slide();
});

//]]>
</script>

Basically you first get the duration for each slide(you can add more variables and options later) and check to make sure it has a proper value(use intval() to convert the value to an integer and then if it's not false or 0, multiply it by a 1000 to get miliseconds value).

In your JavaScript, you create a couple of variables.

1. delays - this is an array containing the delays for all slides.
2. _curr_index - this holds the current slide(and delays) index.
3. _delay - we use this variable later, but we set it up here
4. _aa_timeout - this variable will hold the reference to a timeout we'll use later on
5. _auto_advancing - this will be a flag variable, marking whether we're advancing via our function, or the user used the FlexSlider navigation.

When you set-up FlexSlider, you set no slideshow, since we're going to advance the slides from our script. You also add a callback function for the after "event" of Flexslider - it executes after each slide's animation completes. There we set-up the time out that will advance the slider to the next slide and check if the user has used the slider controls, or we've advanced to the next slide from our own script.

Then we define the auto_advance_slide() function which actually sets-up the time out for advancing to the next slide.

---

PP: I haven't tested the function, some please test it and tell me if it's not working(and preferrably what you see in FireBug, or Chrome's developer console).