CODEWITHSUNDEEP
jquerycssowl-carousel
Nirali Vachhani
Nirali Vachhani

Reputation: 15

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

I use Owl carousel for mobile view. I display a single item but when I click the next button then the second item is cut from the left side. I also included 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

Upvotes: 0

Views: 11753

Answers (1)

Imran
Imran

Reputation: 530

Owl-carousel has API for responsive view. You can control the number of sliders you want to show from there. Here is a demo https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html So, try using

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

Upvotes: 2

Related Questions