javascript - 向 Owl Carousel 模板添加箭头和自动播放

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
});

这个函数里面是特定于 Owl Carousel 的。

$("latest_news .owl-carousel") 选择正确的元素。在这里您将使用自己的 CSS 选择器来获取 slider 。

它被传递给 slider 参数的 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 的好地方。