The project uses the bootstrap mesh and owl slider carousel slider.

In the desktop version displays two slides. How to make that with a width of 991px and less, one slide is displayed?

Here is my code:

owl.owlCarousel({ navigation : true, dots: false, slideSpeed : 300, paginationSpeed : 400, items : 2, itemsDesktop : true, itemsDesktopSmall : true, itemsTablet: true, itemsMobile : true, navigationText : ["",""], responsiveClass:true, responsive:{ 991:{ items: 1 } } });

UPD

When adapting a slide, the item width is not appropriate in the script. How to change the breakpoint in owl ?

3 answers 3

owlCarousel 1

How to achieve adaptability on the old version of the slider. We have 5 points where we can register a different number of slides:

 owl.owlCarousel({ ... items : 2 // по-умолчанию 2 itemsDesktop:false, itemsDesktopSmall:[991,1], // если размер экрана меньше или равно 991 количество слайдов - 1 itemsTablet:false, itemsMobile:false, });

This makes it possible to preset the number of slides. The format is [x, y] whereby x = browser width and y = number of slides displayed. For example [1199,4] means that if (window <= 1199) {show 4 slides per page}

owlCarousel 2

On the new version of the slider, we register several objects whose names correspond to the minimum width. Objects contain overridden parameters of the slider, you can override not only the number of slides, but also, for example, include navigation and so on.

 owl.owlCarousel({ ... responsive:{ 0:{ items: 1 } 991:{ items: 2 } } });
  • so tried, does not work. - Marina Voronova
  • @MarinaVoronova somewhere you can see? Link to the page? - Crantisz
  • Unfortunately no, the project is locally - Marina Voronova
  • one
    @MarinaVoronova, as I understand it, you have an old, first version of owl slider, which is no longer supported . Update the slider and use the proposed edits - Crantisz
  • Yes, the old version is 1.3.2. How can I upgrade if I use gulp? owl set using bower - Marina Voronova

Something like this:

  var itm = 2; if(window.screen.width <= 991) { itm = 1; } owl.owlCarousel({ navigation : true, dots: false, slideSpeed : 300, paginationSpeed : 400, items : itm, itemsDesktop : true, itemsDesktopSmall : true, itemsTablet: true, itemsMobile : true, navigationText : ["",""], responsiveClass:true, responsive:{ 991:{ items: 1 } } });
  • Thanks for the decision. it should work. but the owl-item in the script sets the wrong width, which is why a part of the next slide is visible. - Marina Voronova
  • try to remove the responsive:{ 991:{ items: 1 } - L. Vadim
  • if you remove, it doesn't adapt at all - Marina Voronova
  • thank! after updating everything works correctly - Marina Voronova
  • you welcome :)) - L. Vadim

Here is an example from the documentation. Click on the "execute code" button and see one column. Click on "Expand fragment" and you will see three columns.

 $(document).ready(function(){ $('.owl-carousel').owlCarousel({ loop:true, margin:10, responsiveClass:true, responsive:{ 0:{ items:1, nav:true }, 991:{ items:3, nav:true }, } }) }); 
 .owl-carousel div{ background: #4DC7A0; } 
 <link href="https://owlcarousel2.imtqy.com/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet" /> <link href="https://owlcarousel2.imtqy.com/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://owlcarousel2.imtqy.com/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script> <div class="owl-carousel"> <div> Your Content 1 </div> <div> Your Content 2</div> <div> Your Content 3</div> <div> Your Content 3</div> <div> Your Content 4</div> <div> Your Content 5</div> <div> Your Content 6</div> </div>

  • so tried, does not work - Marina Voronova