如何在悬停时不停止猫头鹰旋转木马？

Posted 2023-05-07

【中文标题】如何在悬停时不停止猫头鹰旋转木马？

【英文标题】：How not to stop owl carousel on hover?

【发布时间】：2015-12-27 22:25:41

【问题描述】：

目前，当您将其悬停时，轮播会停止，我添加了autoplayHoverPause:false，但它似乎没有任何改变。 是否有其他选项可以用来阻止它在悬停时停止？

$('.owl-carousel').owlCarousel(
    autoplayHoverPause:false,
    loop:true,
    margin:0,
    nav:true,
    responsive:
        0:
            items:1
        ,
        600:
            items:2
        ,
        1000:
            items:4
        
    
);

【问题讨论】：

autoplayHoverPause 是正确的属性。此外，false 是autoplayHoverPause 的默认值，因此即使您没有设置此属性，它也不应该在悬停时暂停轮播。

你能在 JSFiddle 重现这个问题吗？

@YeldarKurmangaliyev，对不起，我做不到。

试试 stopOnHover : false,

@j.rey，什么都没有改变...

【参考方案1】：

要在悬停时停止幻灯片，只需将以下内容添加到您的脚本中：

autoplayHoverPause:true

【参考方案2】：

正如 j.rey 所指出的，stopOnHover 似乎是根据本页规范在悬停时启动/停止自动播放的正确方法：

http://owlgraphic.com/owlcarousel/#customizing

我在文档中没有看到对 autoplayHoverPause 的任何引用。也许那是一个旧版本？

【讨论】：

autoplayHoverPause 在docs here 但stopOnHover 不在！

【参考方案3】：

只需在您的脚本中添加 stopOnHover:true。

【讨论】：

那实际上不会产生相反的效果吗？他们希望它在悬停时继续，并且设置此参数似乎会导致它在悬停时停止......

【参考方案4】：

设置autoplayHoverPause:false

Fiddle

【参考方案5】：

stopOnHover:true https npmjs.com 包 react-owl-carousel

【参考方案6】：

您可以尝试修改通过owl.carousle.js创建的hover css

<script>
$(".owl-wrapper-outer").mouseover(function()
                $('.owl-wrapper').css(
                "-webkit-transition": "",
                "-moz-transition": "",
                "-o-transition": "",
                "transition": "",  
                    );

                );
</script>

【参考方案7】：

stopOnHover:truehttps npmjs.com 包 react-owl-carousel

使用mouseDrag : false。