Я использую Сову карусель, в мобильном представлении я хочу отобразить только один элемент. Но когда я нажимаю на следующую кнопку, второй элемент обрезается с левой стороны

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;
}

Первый предмет Owlcarousel Второй предмет Owlcarousel

Answer 1

Сова-карусель имеет 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
      }
    }
  });