javascript - 自动播放轮播？

Question

我对 Javascript 非常非常陌生。我试图让两个 slider 在同一页面上缓慢自动播放:

Live site - 主转盘和底部附近带有 Logo 的较小转盘。

较小的一个正在使用 OwlCarousel，我知道我可以添加 autoPlay: 3000, - 但不能在一个页面上添加，因为另一个页面？

Answer 1

您的主 slider 使用 swiper 。

在您的 HTML 代码中，您有脚本:

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: '.swiper-pagination',
    nextButton: '.arrow-right',
    prevButton: '.arrow-left',
    // effect: 'cube',
    keyboardControl: true,
    parallax: true,
    speed: 600,
    spaceBetween: 0
});

您需要添加自动播放(在本例中为小p)选项，例如:

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: '.swiper-pagination',
    nextButton: '.arrow-right',
    prevButton: '.arrow-left',
    // effect: 'cube',
    keyboardControl: true,
    parallax: true,
    speed: 600,
    spaceBetween: 0,
    autoplay: 8000
});

<小时/>

您的 Logo 轮播使用 owlCarousel

在 JavaScript 文件 (script.js) 中，您必须将 autoPlay(大写 P)选项添加到 .brand-carousel。

var owl= $(".brand carousel");
owl.owlCarousel({
  navigation:false,
  pagination:false,
  items:8,
  itemsTablet:[768,4],
  itemsMobile:[400,2],
  autoPlay: 3000
});