javascript Owl Carnival限制循环次数,但autoPlay不会停止循环

y4ekin9u  于 2023-11-15  发布在  Java
关注(0)|答案(3)|浏览(119)

autoPlayerboard不打算停止autoplay:真的吗?因为无论我怎么尝试,猫头鹰Carnival都不会停止。

$('.owl-carousel').owlCarousel({
         items: 1,
         autoplay:true,
        autoPlaySpeed:500,
        autoPlayTimeout:5000,
        autoPlayHoverPause:true,
        loop:true,

字符串
当然,其他人想要的东西比循环永远,因为这是恼人的。

bbmckpt7

bbmckpt71#

您可以将“stop.owl.autoplay”触发器与计时器结合使用,并在通过每张幻灯片一次或两次或任意次数后停止旋转木马。
要使其循环两次并停止,可以使用以下配置:

  • 循环:真
  • autoplayTimeout:1000(仅用于示例的1秒)
  • 项目:1

现在,使用这些选项,您的滑块将永远循环,显示一张幻灯片1秒,然后移动到下一张。
为了在每张幻灯片播放两次后停止播放,您可以使用owl提供的“onInitialized”事件,并在滑块初始化时调用一个函数。假设您总共有3张幻灯片,因此如果您想在第二次循环后停止播放,则必须等待6000 ms(6秒)。
因此,在回调函数中,您可以设置一个计时器,使滑块在第6秒停止。

let $carousel = $('.carousel');
let itemsCount = Number($('.carousel').attr("data-items"));
let autoplayTimeout = 1000;
let loops = 2;
$carousel.owlCarousel({
    loop: true,
    autoplay: true,
    nav: true,
    dots: true,
    items: 1,
    autoplayTimeout: autoplayTimeout,
    // Stops after the second cycle
    onInitialized : stopTimer({
        itemsCount,
        autoplayTimeout,
        loops
    }),
});
function stopTimer(params) {
    setTimeout(
        function() {
            $carousel.trigger('stop.owl.autoplay');
        }, 
        params.itemsCount * Number(params.autoplayTimeout) * params.loops
    );
}

字符串
你可以找到更多的事件,由猫头鹰HERE提供。希望这对你有帮助!:)

6ss1mwsb

6ss1mwsb2#

要停止猫头鹰旋转木马,您可以触发:

$('.owl-carousel').trigger('stop.owl.autoplay')

字符串
JSFiddle

qvk1mo1f

qvk1mo1f3#

下面是我最终做的,以限制旋转木马周期到一个特定的数字。

var itemCount = e.item.count; // Total number of items
var currentItem = e.item.index + 1; // Current item index (1-based)

if (itemCount === currentItem) { currentLoop += 1; }

var maxCycles = this.core.settings.maxCarouselCycles;

// Check if the current loop exceeds the maximum allowed loops
if (currentLoop >= maxCycles) {

                setTimeout(() => {
                    // Set it back to the first slide + stop all autoplay activity. Wait 1.5 seconds because it does it too fast otherwise.
                    owl.trigger('to.owl.carousel', 0);
                    playerCore.DisableCarouselAutoplay();
                }, 1500);
}

字符串
我在“Animate”Object中做了这件事,并在名为“translated.owl.carousel”的事件处理程序中定义了我的代码,该事件处理程序发生在幻灯片过渡之后。你只需要在owl.carousel.js文件中全局声明你的最大循环数,或者你可以像我做的那样,在建立owl对象时传递的设置中驱动它。
如果你想这样做,你只需要做以下几点:

this.InitCarouselEvents = function (enableAutoScroll, scrollDelay, maxCycles) {
         owl = $('.owl-carousel').owlCarousel({
    autoplay: enableAutoScroll,
    autoplayTimeout: scrollDelay,
    
// Custom parameter
maxCarouselCycles:maxCycles
         });


然后你也可以在这里定义一个默认值:

Autoplay.Defaults = {
    autoplay: false,
    autoplayTimeout: 5000,
    autoplayHoverPause: false,
    autoplaySpeed: false,
    maxCarouselCycles: 3
};


另外,如果你想确保自动播放完全停止,在某些情况下,你似乎需要设置一些设置为false。

//MODIFIED BY RS: Added by to address autoplay not stopping on Mobile + Fullsreen when "TouchDrag"" was initiated
this._core.settings.autoplay = false;
this._core.settings.autoplayHoverPause = false;

相关问题