自动播放转盘?

时间:2015-12-16 21:28:57

标签: javascript twitter-bootstrap carousel owl-carousel

我非常非常新的Javascript。我试图让两个滑块在同一页面上慢慢自动播放:

Live site - 主旋转木马和靠近底部的较小旋转木马。

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

1 个答案:

答案 0 :(得分:1)

您的主要滑块使用 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
});

您需要添加autoplay(在这种情况下为小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
});

您的徽标轮播使用 owlCarousel

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

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