Make the owl slider carousel adaptive to the bootstrap grid

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

In the desktop version, two slides are displayed. How can I make one slide output at a width of 991px or less?

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 script sets the wrong width item. How do I change breakpoints in owl?

Author: voronovam, 2017-03-01
Source

3 answers

OwlCarousel 1

How adaptability is achieved 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 allows you to preset the number of slides visible with a particular browser width. The format is [x,y] whereby x=browser width and y=number of slides displayed. For example [1199,4] means that if(window

OwlCarousel 2

On the new version we specify several objects with names corresponding to the minimum width of the slider. Objects contain redefined slider parameters, you can redefine not only the number of slides, but also, for example, enable navigation and so on. 

owl.owlCarousel({
    ...
    responsive:{
        0:{
            items: 1
        }
        991:{
            items: 2

        }
    }
});
 2
Author: Crantisz, 2017-03-01 11:40:08

Something like that:

    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

            }
        }
    });
 1
Author: L. Vadim, 2017-03-01 09:51:47

Here is an example from the documentation. Click on the "run code" button and you will 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.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://owlcarousel2.github.io/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.github.io/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>
 0
Author: koks_rs, 2017-03-01 10:11:55