web-dev-qa-db-ja.com

フクロウカルーセルスライド速度が機能しない

ホームページに複数のフクロウカルーセルを設定しています。 1つ目（送料無料に関するもの）は、slideSpeedを10000に設定しています。すべてのスライドが同じ速度で変化することがわかります。

これが機能しない理由はありますか？私は何か間違っていますか？

jqueryowl-carousel
9
danjfoley

自動再生は、スライドの変更速度を設定する場所です。スライド速度ではありません

14
danjfoley

使用する必要があることに注意してください

    autoplay:true,
    autoplayTimeout:5000

owlCarousel 2.0を使用する場合

15
neoMagic

時間をautoPlayオプションに設定するだけです

$("#slider").owlCarousel({
    autoPlay: 2500,
    //autoPlay: true, <-- if you want to set default slide time (5000)

    slideSpeed: 300,
    paginationSpeed: 500,
    singleItem: true,
    navigation: true,
    scrollPerPage: true
});
13
Azamat Mirvosiqov

注：この返信は、フクロウカルーセル2、およびフェードトランジションのみの速度に適用されます。カルーセルがフェードではなくスライドする場合は、この回答を無視してください。これは元の質問に対する直接的な答えではありませんが、OwlCarousel 2のスライド遷移速度を制御する方法のより一般的な理解に役立つことを願っています。フェード速度を制御する方法を見つけるためにGoogleからここに来たように、他の人に役立つかもしれない存在。

私はsmartSpeedまたは他のオプションを使用してフェードトランジションの持続時間を設定しようとしていませんでしたが、animate.cssを使用して読んだので、css3トランジション速度をオーバーライドすることが重要だと推測したので、スライダーとそれが働いた。

_<style type="text/css">
.my-parent-class .owl-carousel .owl-item {
    -webkit-animation-duration: 3s !important;
    animation-duration: 3s !important;
}
</style>
_

これはスライド速度には影響せず、フェード速度にのみ影響します。スライド式スライダーを使用している場合、これは答えではありません。

$(".owl-carousel").owlCarousel({})関数では、次のように自動再生を設定しました。

_autoplay: true,
autoplayTimeout: 5000,  
_

3s css3遷移期間と5000ms autoplayTimeoutの組み合わせは、1つの遷移が終了してから次の遷移が開始するまでの2秒を意味します。 autoplayTimeout：この例では8000。

6
Jon
jQuery('.owl-carousel').owlCarousel({

    loop:true,

    margin:10,

    dots: true,

    autoplay: 3000, // time for slides changes

    smartSpeed: 1000, // duration of change of 1 slide

    responsiveClass:true,

    responsive:{

        0:{

            items:1

        },

        600:{

            items:1

        },

        1000:{

            items:1,

            loop:true

        }

    }

});
3
Diwakar Singh

こんにちは、Owl Carousel beta 2.0.0を使用しています。スライド速度を遅らせるオプションが1つ見つかりました。オプション「smartSpeed：milliseconds」を編集してください。

このコードを試してください：

mbanner = $("#mainbanner").owlCarousel({
  items: 1,
  loop: true,
  autoplay: true,
  responsiveClass: true,
  center: true,
  center: true,
});
2
Thet

バージョン2.3.4では、次の規則に従って時刻を変更する必要があります

autoplay:true,
autoplayTimeout:1000

デフォルト値は

// default settings:
autoplay:false
autoplayTimeout:5000

ここにリファレンスがあります： https://owlcarousel2.github.io/OwlCarousel2/demos/autoplay.html

1
Ebrahim Amer

スライダーのスライド速度を変更するには、これを適用する必要があります...

<style type="text/css">
.owl-stage {
transition: 0.8s !important;
}
</style>

...これにより遷移が遅くなります。

1
alib0ng0

スライド速度の変更テストでは、このコード：（autoplayTimeoutプロパティでスライドの継続時間を設定できます）

                    jQuery(document).ready(function ($) {

                        var ocClients = $("#Slider");

                        ocClients.owlCarousel({
                            loop: true,
                            nav: false,
                            autoplay: true,
                            autoplayTimeout: 2000,
                            dots: false,
                            autoplayHoverPause: false,
                            responsive: {
                                0: {
                                    items: 1
                                },
                                480: {
                                    items: 3
                                },
                                768: {
                                    items: 4
                                },
                                992: {
                                    items: 5
                                },
                                1200: {
                                    items: 7
                                }
                            }
                        });

                    });
0
saeid mohammad hashem