貓頭鷹旋轉木馬幻燈片速度不起作用

Question

我的主頁上設置了多個貓頭鷹輪播。 我將第一個（關於免費送貨的）設置為 10000 的 slideSpeed。正如您所見，所有幻燈片都以相同的速度變化。

有沒有理由這不起作用？ 難道我做錯了什么？

Answer 1

請注意，您必須使用

autoplay:true,
autoplayTimeout:5000 

使用 owlCarousel 2.0 時

Answer 2

自動播放是您設置幻燈片更改速度的地方。 不是滑動速度

Answer 3

只需將時間設置為自動播放選項

$("#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
});

Answer 4

注意：此回復適用於貓頭鷹旋轉木馬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 相結合意味着一個過渡結束和下一個過渡開始之間有 2 秒 - 如果您希望幻燈片在下一個過渡之前等待 5 秒，您需要將 css 過渡時間添加到 autoplayTimeout，例如 autoplayTimeout ：在本例中為 8000。

Answer 5

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

        }

    }

});

Answer 6

對於 2.3.4 版本，您應該遵循以下約定來更改時間

autoplay:true,
autoplayTimeout:1000

因為默認值是

// default settings:
autoplay:false
autoplayTimeout:5000

這是參考：https ://owlcarousel2.github.io/OwlCarousel2/demos/autoplay.html

Answer 7

嗨，我正在使用 Owl Carousel beta 2.0.0 我找到了一種延遲滑動速度的選項編輯選項“smartSpeed：毫秒”

試試這個代碼：

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

Answer 8

要更改滑塊滑動的速度，您需要應用此...

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

...這將減慢過渡速度。

Answer 9

更改滑動速度測試此代碼：（ 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
                                }
                            }
                        });

                    });

Answer 10

滑動速度由smartSpeed參數設置

jQuery('.owl-carousel').owlCarousel({
    smartSpeed: 3000
});

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

Answer 11

 loop: true,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
navSpeed: 700,
//All your need is here,
autoplayTimeout:1000,// to maintain speed
autoplay:true,

Answer 12

更改為任何積分器，例如 autoPlay : 5000 每 5 秒播放一次。 如果設置 autoPlay: true 默認速度將為 5 秒。

Змініть значення на любе ціле число, наприклад 自動播放 : 10000, пауза автозмінювання складатимекнд 10 Якщо встановити значення "true", швидкість автоанімації становитиме 5 секунд.