Dynamic delay for each slide

[twixchopra]

I am working on anything slider and I want to give slide delay time from the array only(actually I am making this array from the PHP so I have to stick with it only).

I am playing with below code :

jQuery(function() {

    var delayArray = ["7000","5000","1000"];
    console.log(delayArray);
    //this function I have tried without success
    function formatText(index, panel){
        var myHtml = delayArray[index];
        return myHtml;
    }
    jQuery('#slider').anythingSlider({
        theme           : "cs-portfolio",
        autoPlay        : true,
        autoPlayLocked  : true,
        resumeDelay     : 1000,
        delay           : formatText, //Here I have used that function
        //buildArrows   : false,
        buildNavigation : false,
        //buildStartStop: false,
        hashTags        : false,
        onInitialized: function(e, slider) {
            setupSwipe(slider);
            playvid(slider);
        }
    }).anythingSliderVideo({
        // video id prefix; suffix from $.fn.anythingSliderVideo.videoIndex
        videoId : 'asvideo',
        // auto load YouTube api script
        youtubeAutoLoad : true,
        youtubeParams: {
            modestbranding : 1,
            iv_load_policy : 3,
            fs : 1
        }
    });

});

I am also using HTML5 video and it working nicely but the issue is It don't get started on 1st slide only and after completion of one loop of all slide, it will work. I used code for that your one of demo on jsfiddle and I don't know which one.

Thanks.

[Mottie]

Hi @twixchopra!

There is a FAQ entry showing how to set a different time for each slide will that solve this issue?

[twixchopra]

This is what I have tried without any success.Am I making any mistake here ???

var slideTimes = ["7000","5000","1000"];
jQuery('#slider').anythingSlider({

    delay : slideTimes[1],

    onSlideComplete: function(slider) {
        playvid(slider);
        slider.clearTimer(true); // stop slideshow
        // Change delay time based on saved timings
        if (slideTimes.hasOwnProperty(slider.currentPage)) {
            slider.options.delay = slideTimes[slider.currentPage];
        } else {
            slider.options.delay = slideShowDelay;
        }
        slider.startStop(slider.playing, true); // restart slideshow
    },

});

[Mottie]

The slideTimes is an array using a zero-based index. The value in slider.currentPage is a one-based index. So, you need to subtract one.

if (slideTimes.hasOwnProperty(slider.currentPage - 1)) {
    slider.options.delay = slideTimes[slider.currentPage - 1];
} else {

If it still doesn't work, then please copy the code from the FAQ.

[twixchopra]

Worked ! Thanks for that awesome plugin. You saved lots of effort of mine.

If you can implement HTML5 video autoplay on 1st slide as well then It would be great. Thanks again.

[Mottie]

See this demo on how to make HTML5 autoplay on initialization.

The above demo, and many others can be found on the home wiki page.

[Lliya]

I just want to say… Rob (and all you others out there), but especially you Rob. Thank you so much for all support! and an awesome product. Best wishes.

[twixchopra]

@Mottie Yah ! Its working .. I was using the same code but don't know why it was not working .. May be I did something wrong ..But everything is working perfect now ! Thanks @Mottie for your time and wonderful plugin.

[Mottie]

I'm glad! :smile_cat:

You're welcome @twixchopra And Thanks @Lliya! :blush:

[twixchopra]

Hey again ..

Can you tell me how to debug delay time ? I think after changing in code, it is showing correct time, but slide is not taking time as per delay time.

Here is some of useful code:

var delayTimes = ["9000", "7000", "7000", "1000", "1000", "5000"];
console.log(delayTimes);
jQuery('#slider').anythingSlider({

    delay: delayTimes[1],
    onSlideComplete: function(slider) {
        playvid(slider);
        slider.clearTimer(true); // stop slideshow

        // Change delay time based on saved timings
        if (delayTimes.hasOwnProperty(slider.currentPage - 1)) {
            slider.options.delay = delayTimes[slider.currentPage - 1];
            var twix = slider.currentPage - 1;
            console.log("Twix: "+twix);
            console.log(delayTimes[slider.currentPage - 1]);
            console.log("if condition:"+slider.currentPage);
        } else {
            slider.options.delay = slideShowDelay;
        }
        slider.startStop(slider.playing, true); // restart slideshow
    }
});

[Mottie]

Yeah, the issue is that the delayTimes is an array and the code from the FAQ/demo is expecting an object with the column index (one-based) as the key.

var slideTimes = {
    1 : 1000,
    2 : 2000,
    3 : 3000,
    5 : 5000
}

To make the code work with an array, do the following (demo):

// *** Vary slideshow time ***
var slideTimes = ["9000", "7000", "7000", "1000", "1000", "5000"];

$('#slider').anythingSlider({
    autoPlay: true,
    delay: slideTimes[0],
    onSlideComplete : function(slider){
        slider.clearTimer(true); // stop slideshow
        // Change delay time based on saved timings
        // if a slideTimes value doesn't exist, fall back to 1000 ms
        slider.options.delay = slideTimes[slider.currentPage - 1] || 1000;
        slider.startStop(slider.playing, true); // restart slideshow
    }
});

[twixchopra]

Hi ..

Above given code is working fine until there is photo in slider but as soon as I put HTML5 video as my 1st slide, it stop working for only 1st slide(1st slide is like headache for me ;) ).

NOTE : If I put photo instead of video in 1st slide, It works perfectly fine.

[Mottie]

I can only guess without seeing the actual code being used, but if the slideTimes array has an empty string, null value, etc (any falsy values) then it will default to the fallback value of 1000.

That being said, make sure that 1000 is your desired fallback value.

slider.options.delay = slideTimes[slider.currentPage - 1] || 1000; // <- fallback value

If that doesn't solve the problem, then please share how that code is actually being used.

[twixchopra]

Hi

I am facing really weird issue.The below given code works perfectly fine(even if there is video in 1st slide) on my local machine.

But the same code does not work same on other local demo server(It does not work for only 1st slide and only If there is video in 1st slide.. Otherwise works perfectly).

Here is the code I am using :

                <script type="text/javascript">
                    jQuery(function() {

                        var setupSwipe = function(slider) {
                        var time = 1000,
                            // allow movement if < 1000 ms (1 sec)
                            range = 50,
                            // swipe movement of 50 pixels triggers the slider
                            x = 0,
                            t = 0,
                            touch = "ontouchend" in document,
                            st = (touch) ? 'touchstart' : 'mousedown',
                            mv = (touch) ? 'touchmove' : 'mousemove',
                            en = (touch) ? 'touchend' : 'mouseup';

                        slider.$window
                            .bind(st, function(e) {
                                // prevent image drag (Firefox)
                                e.preventDefault();
                                t = (new Date()).getTime();
                                x = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
                            })
                            .bind(en, function(e) {
                                t = 0;
                                x = 0;
                            })
                            .bind(mv, function(e) {
                                e.preventDefault();
                                var newx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
                                    r = (x === 0) ? 0 : Math.abs(newx - x),
                                    // allow if movement < 1 sec
                                    ct = (new Date()).getTime();
                                if (t !== 0 && ct - t < time && r > range) {
                                    if (newx < x) {
                                        slider.goForward();
                                    }
                                    if (newx > x) {
                                        slider.goBack();
                                    }
                                    t = 0;
                                    x = 0;
                                }
                            });
                    };

                        var playvid = function(slider) {
                            var vid = slider.$currentPage.find('video');
                            if (vid.length) {
                                // always start from the beginning
                                vid[0].currentTime = 0;
                                // autoplay
                                vid[0].play();
                            }
                        };

                        var delayTimes = <?php echo json_encode($delayTime_array); ?>;
                        //above line will generate this array [ "9000", "5000", "3000", "1000", "7000", "1000" ]

                        /*When I try to debug, I found it is showing correct time but do not wait for that much time*/

                        //console.log(delayTimes);
                        jQuery('#slider').anythingSlider({

                            theme           : "cs-portfolio",
                            autoPlay        : true,
                            autoPlayLocked  : true,
                            //autoPlayDelayed     : false,
                            resumeDelay     : 0000,
                            delay           : delayTimes[0],
                            //buildArrows   : false,
                            buildNavigation : false,
                            //buildStartStop: false,
                            hashTags        : false,
                            onInitialized: function(e, slider) {
                                setupSwipe(slider);
                                playvid(slider);
                                //slider.$controls
                                    //.prepend('<ul><li><a class="prev">Prev</a></li></ul>')
                                    //.append('<ul><li><a class="next">Next</a></li></ul>')
                                    //.find('.prev, .next').click(function(){
                                    // if ($(this).is('.prev')) {
                                        //slider.goBack();
                                    //} else {
                                    //slider.goForward();
                                    //}
                                //});
                            },
                            // pause video when out of view
                            onSlideInit: function(e, slider) {
                                var vid = slider.$lastPage.find('video');
                                if (vid.length && typeof(vid[0].pause) !== 'undefined') {
                                    vid[0].pause();
                                }
                            },
                            // play video
                            onSlideComplete: function(slider) {
                                playvid(slider);
                                slider.clearTimer(true); // stop slideshow
                                // Change delay time based on saved timings
                                console.log(delayTimes[slider.currentPage - 1]);
                                slider.options.delay = delayTimes[slider.currentPage - 1] || 7000;
                                slider.startStop(slider.playing, true); // restart slideshow
                            }
                            }).anythingSliderVideo({
                                // video id prefix; suffix from $.fn.anythingSliderVideo.videoIndex
                                videoId : 'asvideo',
                                // auto load YouTube api script
                                youtubeAutoLoad : true,
                                youtubeParams: {
                                    modestbranding : 1,
                                    iv_load_policy : 3,
                                    fs : 1
                                }
                            });

                    });
                </script>

In above code it generate an array and 1st delay time is 9000 and It is showing me correct time in console but it does not wait for that much time and slide gets changed only after 3000.I tried to check whether I given 3000 anywhere and there is not 3000 anywhere in that file.

What might be the issue ?

[twixchopra]

UPDATE : Sorry for trouble. When I tried to put other HTML5 video, I found it is working as expected.

So my question is Does video has anything to do with it ? Video which was creating issue has 12 sec duration.(Note: Same video works as expected when I change slide order from 1 to 4).

Thanks.

[twixchopra]

Hey

Can you please tell me , Is it supported up to IE 6?

If not then pls tell me compatible versions of IE ?

[Mottie]

Don't bother with IE6 support - even Microsoft is pushing to get everyone to use IE11+

customers using Internet Explorer 8, Internet Explorer 9, or Internet Explorer 10 on Windows 7 SP1 should migrate to Internet Explorer 11 to continue receiving security updates and technical support

AnythingSlider "should" work on older versions of IE - I can't remember the last time I checked - but you'll need a polyfill to get HTML5 video to work.