我使用 Owl 旋转木马，在移动视图中，当我单击下一步按钮时，我只想显示单个 item.but 第二个项目从左侧剪切

Question

我使用 Owl 移动视图轮播。我显示单个项目，但是当我单击下一步按钮时，第二个项目从左侧被剪切。我还包括 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;
}

First Item of Owlcarousel Second Item of Owlcarousel

Answer 1

Owl-轮播有 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
      }
    }
  });

我使用 Owl 旋转木马，在移动视图中，当我单击下一步按钮时，我只想显示单个 item.but 第二个项目从左侧剪切

I use Owl carousel, In mobile view i want to display only single item.but when i click on next button second item is cut from left side

css

jquery

owl-carousel