Revolution Slider - How to make different time for different items?

Question

THE SITUATION:

I am using for my slideshow the Slider Revolution plugin.
I need to set different times (duration) for the images displayed. For example the first image i need to display for just 2 seconds, while the second image for 7 seconds.

THE QUESTION:

How can i set the time that last a single item? Is it possible?

THE CODE:

In the js function that initialize the plugin, there are these setting: delay:9000, and changing it, it is possible to set the duration, but will regard all the items.

This is the js function:

 initRevolutionSlider: function () {
        var tpj=jQuery;

        tpj(document).ready(function() {

            if (tpj.fn.cssOriginal!=undefined)
                tpj.fn.css = tpj.fn.cssOriginal;

                var api = tpj('.fullwidthbanner').revolution(
                    {
                        delay:9000,
                        startwidth:960,
                        startheight:250,

                        onHoverStop:"off",                      // Stop Banner Timet at Hover on Slide on/off

                        thumbWidth:100,                         // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
                        thumbHeight:50,
                        thumbAmount:3,

                        hideThumbs:1,
                        navigationType:"bullet",                // bullet, thumb, none
                        navigationArrows:"solo",                // nexttobullets, solo (old name verticalcentered), none

                        navigationStyle:"round-old",            // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom


                        navigationHAlign:"center",              // Vertical Align top,center,bottom
                        navigationVAlign:"bottom",              // Horizontal Align left,center,right
                        navigationHOffset:30,
                        navigationVOffset:20,

                        soloArrowLeftHalign:"left",
                        soloArrowLeftValign:"center",
                        soloArrowLeftHOffset:20,
                        soloArrowLeftVOffset:0,

                        soloArrowRightHalign:"right",
                        soloArrowRightValign:"center",
                        soloArrowRightHOffset:20,
                        soloArrowRightVOffset:0,

                        touchenabled:"on",                      // Enable Swipe Function : on/off


                        stopAtSlide:-1,                         // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
                        stopAfterLoops:-1,                      // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic

                        hideCaptionAtLimit:0,                   // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
                        hideAllCaptionAtLilmit:0,               // Hide all The Captions if Width of Browser is less then this value
                        hideSliderAtLimit:0,                    // Hide the whole slider, and stop also functions if Width of Browser is less than this value


                        fullWidth:"on",

                        shadow:0                                //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows -  (No Shadow in Fullwidth Version !)

                    });

This is the HTML for a single item:

<div class="fullwidthbanner">
    <li data-transition="3dcurtain-vertical" data-slotamount="10" data-speed="100"  data-masterspeed="300" data-thumb="assets/img/sliders/revolution/thumbs/thumb1.jpg">

        <!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
        <img src="img/slideshow/1.jpg">

    </li>
</div>

In this case data-speed and data-masterspeed regards the time of the transition, not the time that last the item.

Someone knows perhaps how this can be achieved?
It has to be done in the HTML or perhaps in the js function ?

Thank you very much!

Answer 1

According to this documentation, pretty sure it is for your plugin, it provides a data-delay config for each slide.

See the docs under the "02 Slider items" header in the page.

<div class="fullwidthbanner">
    <li data-transition="3dcurtain-vertical"
        data-delay="2000"
        data-slotamount="10"
        data-speed="100"
        data-masterspeed="300"
        data-thumb="assets/img/sliders/revolution/thumbs/thumb1.jpg">

        <!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
        <img src="img/slideshow/1.jpg">
    </li>
    <li data-transition="3dcurtain-vertical"
        data-delay="7000"
        data-slotamount="10"
        data-speed="100"
        data-masterspeed="300"
        data-thumb="assets/img/sliders/revolution/thumbs/thumb2.jpg">

        <!-- THE MAIN IMAGE IN THE SECOND SLIDE -->
        <img src="img/slideshow/2.jpg">
    </li>
</div>