将箭头和自动播放添加到猫头鹰旋转木制模板中

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>

值得研究可以更改的其他设置以进行更大的自定义。例如，幻灯片和重新速度可能是让JavaScript玩熟悉的好地方。