Question

我为owl.carousel.min.js下载了一个模板 - 我不知道如何添加自动播放和箭头。

它位于http://testing.r2group.co.za/Test/index.html上的测试服务器上大约一半。我很感激任何帮助，因为我精通HTML，但JS超出了我。（为什么我下载了模板）

Answer 1

您是否找到了如何使用旋转木马的文档？这是一个很好的起点。

猫头鹰是我正在使用的主题的一部分。看起来这个javascript包含在旋转木马之后。

<script>
jQuery(function($){
    $("#latest_news .owl-carousel").owlCarousel({
        lazyLoad: true,
        responsiveRefreshRate: 50,
        slideSpeed: 500,
        paginationSpeed: 500,
        scrollPerPage: true,
        stopOnHover: true,
        rewindNav: true,
        rewindSpeed: 600,
        pagination: true,
        navigation: false,
        autoPlay: true,
        singleItem: true
    });
});
</script>

这告诉浏览器用jQuery启动一个新脚本。

jQuery(function($){
    //code
});

此功能内部特定于猫头鹰旋转木马。

$("latest_news .owl-carousel")选择正确的元素。您可以在此处使用自己的CSS选择器来获取滑块。

正在传递滑块参数的javascript对象。对于您的自动播放，您可以给它

$("#YOUR-ELEMENT .owl-carousel").owlCarousel({
    autoplay: true
});

此对象中的设置也描述了箭头。看起来左/右箭头可以像这样添加：

$("#YOUR-ELEMENT .owl-carousel").owlCarousel({
    navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
});

因此，至少要获得箭头和自动播放，您的脚本应如下所示：

<script>
    jQuery(function($){
        $("#YOUR-ELEMENT .owl-carousel").owlCarousel({
            autoplay: true,
            navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
        });
    });
</script>

值得一看，您可以更改哪些其他设置以进行更多自定义。例如，slideSpeed和rewindSpeed可以成为熟悉javascript游戏的好地方。

将箭头和自动播放添加到owl轮播模板

1 个答案: