web-dev-qa-db-ja.com

Revolution Slider-アイテムごとに異なる時間を作る方法は？

状況：

スライドショーにSliderRevolutionプラグインを使用しています。
表示される画像に異なる時間（期間）を設定する必要があります。たとえば、最初の画像は2秒間だけ表示する必要があり、2番目の画像は7秒間表示する必要があります。

質問：

単一のアイテムが続く時間を設定するにはどうすればよいですか？出来ますか？

コード：

プラグインを初期化するjs関数には、次の設定があります：delay：9000、そしてそれを変更すると、期間を設定することができますが、すべての項目を考慮してください。

これはjs関数です：

 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 !)

                    });

これは、単一のアイテムのHTMLです。

<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>

この場合、data-speedおよびdata-masterspeedは、アイテムが続く時間ではなく、遷移。

誰かがおそらくこれをどのように達成できるか知っていますか？
HTMLまたはおそらくjs関数で実行する必要がありますか？

どうもありがとうございました！

javascriptjqueryhtmlslideshowrevolution-slider
5
FrancescoMussi

このドキュメントによると 、プラグイン用であることは間違いありません。data-delay各スライドの構成。

ページの「02Slideritems」ヘッダーの下にあるドキュメントを参照してください。

<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>
16
Michael Coxon