jquery - 我使用猫头鹰旋转木马，在移动视图中我只想显示单个项目。但是当我单击下一个按钮时，第二个项目从左侧剪切

Question

我使用 Owl carousel 进行移动视图。我显示一个项目，但是当我单击下一个按钮时，第二个项目将从左侧剪切。我还包括owl.carousel.css

if (jQuery(window).width() <= 767) {
  jQuery('.owl-carousel').owlCarousel({
    stagePadding: 0,
    loop: false,
    responsiveClass: true,
    dots: false,
    nav: true,
    autoHeight: true,
    items: 1
  });
}

.owl-stage {
  width: auto !important;
  white-space: nowrap;
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
}

.owl-item.active {
  opacity: 1;
}

.owl-item {
  opacity: 0;
  position: relative;
  min-height: 1px;
}

Owlcarousel 第一项 Owlcarousel 第二项

标签： jquerycssowl-carousel

Answer 1

Owl-carousel 有用于响应式视图的 API。您可以从那里控制要显示的滑块数量。这是一个演示 https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html 所以，尝试使用

  jQuery('.owl-carousel').owlCarousel({
    // Here goes default configs
    responsive : {
      // breakpoint from 0 up
      0 : {
        stagePadding: 0,
        loop: false,
        responsiveClass: true,
        dots: false,
        nav: true,
        autoHeight: true,
        items: 1
      },
      // breakpoint from 768 up
      768 : {
        items: 3
      }
    }
  });