Как изменить количество элементов в owl carousel для мобильных?

232

09 февраля 2019, 16:20

Никак не могу разобраться как изменить количество выводимых элементов в owl carousel для мобильных? Сейчас скрипт такой. Вывожу 5 элементов. На десктопе хорошо выглядит, но на мобильном становятся слишком мелкими.
Как правильно написать медиазапрос в скрипте, чтобы поменять количество выводимых элментов? Нужны ли дополнительные правила в CSS?

<script>
 $(document).ready(function() {
 $(".owl-carousel").owlCarousel({
items:5,
margin:10,
loop:true,
autoplay:true,
autoplayTimeout:2000
 });
 });
</script>

Answer 1

Можно так:

<script>
 function carouselFn(){
 if ($(window).width() < 500){
    $(".owl-carousel").owlCarousel({
     items:1,
     margin:10,
     loop:true,
     autoplay:true,
     autoplayTimeout:2000
     });
  }
  else{
   $(".owl-carousel").owlCarousel({
    items:5,
    margin:10,
    loop:true,
    autoplay:true,
    autoplayTimeout:2000
   });
  }
 };
 $(document).ready(function() {
     carouselFn();
});
$(window).resize(function(){
     carouselFn();     
 });
</script>

А ещё взять и записать это в function и уже вызывать, как при document.ready, так и потом при window.resize

Answer 2

у меня стоит так (slidesToShow - сколько слайдов должно отображаться, slidesToScroll - сколько скролиться за один скрол):

{
  breakpoint: 640,
  settings: {
    slidesToShow: 2,
    slidesToScroll: 2,
    arrows: true
  }
},
{
  breakpoint: 377,
  settings: {
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true
  }
}

Answer 3

$('.owl-carousel').owlCarousel({ 
    loop:true, 
    margin:10, 
    responsiveClass:true, 
    responsive:{ 
        // от 0 и больше 
        0:{ 
            items:1, 
            nav:true 
        }, 
        // от 600 и больше 
        600:{ 
            items:3, 
            nav:false 
        }, 
        // от 1000 и больше 
        1000:{ 
            items:5, 
            nav:true, 
            loop:false 
        } 
    } 
})

Ответы выше не совсем правильные, смотрите внимательней мануал к owl-carousel там есть адаптивность "responsive".

Пользуйтесь ей.