Question

如何让这个java脚本代码自动播放滑块以及如何添加鼠标悬停功能

＆＃13;

$(function() {
  $('.owl-carousel.testimonial-carousel').owlCarousel({
    nav: true,
    navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
    dots: false,
    responsive: {
      0: {
        items: 1,
      },
      750: {
        items: 2,
      }
    }
  });
});

＆＃13;

Answer 1

Owl Carousel有两个您正在寻找的选项，自动播放和 autoplayHoverPause 。

试试这个：

$('.owl-carousel.testimonial-carousel').owlCarousel({
    nav: true,
    navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
    dots: false,
    autoplay: true,
    autoplayHoverPause: true,
    loop: true,
    responsive: {
      0: {
        items: 1,
      },
      750: {
        items: 2,
      }
    }
  });

您可以在此处找到所有可用选项的列表：https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

Answer 2

如果您使用此插件https://owlcarousel2.github.io，请为自动播放添加autoplay: true属性。

要暂停“鼠标悬停”，请添加autoplayHoverPause: true属性：

$(function() {
  $('.owl-carousel.testimonial-carousel').owlCarousel({
    nav: true,
    navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
    dots: false,
    autoplay: true,
    autoplayHoverPause: true,
    responsive: {
      0: {
        items: 1,
      },
      750: {
        items: 2,
      }
    }
  });
});

如何使此滑块自动播放

2 个答案: