javascript - Owl Carousel 问题(自动播放+响应式)

标签 javascript jquery owl-carousel

我在我的网站上使用 owlcarousel,但遇到了一些问题。其一,响应能力无法正常工作。对于两个人来说,轮播不会自动播放。可以查看问题here .

这是我的代码:

$(".owl-carousel").owlCarousel({
    items: 1,
    loop: true,
    center: true,
    dots: true,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplaySpeed: 5000,
    responsiveClass: true,
    responsive:{
      0:{
          items: 1 
      },
      600:{
          items: 1
      },
      1200:{
          items: 1
      }
  }
});

更新:我设法通过添加以下内容来解决响应问题:

itemsDesktop: [1200, 1],
itemsTablet: [980, 1],
itemsMobile: [700, 1]

到选项。

尽管如此,自动播放仍无法正常工作。

最佳答案

这是我的解决方案:

      $('.owl-carousel').owlCarousel({
            item:3,
            singleItem: true,
            autoplay: true,
            autoplayTimeout: 5000,
            loop: true,
            nav: true,
            responsiveClass: true,
            responsive:{
                0:{
                    items: 1,
                    dots: false
                },
                600:{
                    items: 2,
                    dots: false
                },
                1200:{
                    items: 3
                }
            }
        });

关于javascript - Owl Carousel 问题(自动播放+响应式),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42332904/

相关文章:

jquery - 如何添加 Owl-Carousel-2 completeness percent(%) 状态栏(不是 progressBar)?

php - 无法从数据库 php 获取图像

javascript - AngularJS 从外部 Controller 调用公共(public) Controller 函数

javascript - 无法膨胀 SessionStorage 数据;根据通货膨胀方法获取 'incorrect header check' 或 'invalid stored block lengths'

javascript - $.jAlert 不是函数

javascript - 如何从异步调用返回响应?

javascript - 无法在 React.js 中为按钮切换类

javascript - 如何设置标题以在完整日历中仅显示月份名称

javascript - 如何设置 cookie 以在第二页加载时隐藏通知栏?

jquery - 在 Owl Carousel 上显示其他项目的一半