Почему OWL Carousel не адаптивит картинки внутри?

Question

[Justin Bieber]

/*BEGIN SLIDER*/
 $(".slider").owlCarousel({
  items : 1,
  stopOnHover: true,
  itemsDesktop:[1199,1],
  itemsDesktopSmall:[979,1],
  itemsTablet :[768,1],
  itemsMobile: [479,1]
});
 /*button carousel*/
 $(".next_button").click(function(){
  $(this).parent().find(".slider").trigger("owl.next");
});
 $(".prev_button").click(function(){
  $(this).parent().find(".slider").trigger("owl.prev");
});
 /*button carousel*/

 /*END SLIDER*/

Answer 1

[Никита Кит]

лучше заюзай CSS. я обычно для адаптивности (хотя использую бутстраповый слайдер, не суть) картинки подключаю через background-image: url(...) , а дальше выставляю для фона свойства, которые и вносят адаптивность в слайдер. то есть position center, size cover (иногда contain, судя по разрешениям картинок) ну и no-repeat, для точности. а потом блокам даю несколько медиа запросов и кидаю туда разные ширины и высоты для разных экранов. Работает на ура.

Comments

[Justin Bieber]

это все классно, но почему карусель это сразу не может сделать?

[Никита Кит]

Justin Bieber: потому что они созданы для подключения img-шек, как правило, а они бывают всякого разного размера. вот даже мой способ не всегда канает, но с ним есть альтернатива в медиа-запросы просто разного разрешения картинки подключить. css куда надёжнее и лучше скриптов. чем меньше на сайте скрипта, тем он лучше и оптимизированней. Юзай меньше скриптов

[Justin Bieber]

www.visitpluto.com/beacon-panels/content-panels/de... такой способ?

[Никита Кит]

Justin Bieber: ну тут через @include сделано, видимо особенность слайдера, но суть передана правильно

Answer 2

[Владислав]

Попробуй картинкам задай стиль:
max-width: 100%;
width: auto;
height: auto;
display: block;

А в опциях слайдера:
autoHeight: true,
responsiveClass: true,

Comments

[Justin Bieber]

autoHeight: true,
responsiveClass: true, что то новое?

[Владислав]

Justin Bieber: Нет. В документации написано или же в демо примерах можно найти https://owlcarousel2.github.io/OwlCarousel2/docs/s...