Как пропорционально уменьшить элементы карусели на малых разрешениях?

Question

[ligisayan]

Всем привет! Есть owl-caruosel карусель с 1 центральным элементом. Если на больших разрешениях все смотрится хорошо, то на малых почему-то ужасно - картинки изначально большого размера и не уменьшаются пропорционально, хоть сама карусель адаптивная и в настройках карусели и указано свойство responsive. Вопрос: как пропорционально уменьшить элементы? Фидл

<section class="row" id="our-reviews">
  <div id="reviews" class="owl-carousel">
    <div class="item">
      <img src="http://placehold.it/707x349">
    </div>
    <div class="item">
      <img src="http://placehold.it/707x349">
    </div>
    <div class="item">
      <img src="http://placehold.it/707x349">
    </div>
  </div>
</section>

var owl3 = $('#reviews');

owl3.owlCarousel({
  loop: true,
  center: true,
  margin: 196,
  nav: true,
  autoWidth: true,
  navText: ["", ""],
  dots: false,
  responsive: {
    600: {
      items: 1
    },
    768: {
      items: 2
    },
    992: {
      items: 2
    },
    1200: {
      items: 2
    }
  }
});

#reviews .owl-item {
  margin: 30px auto 80px;
}
#reviews .owl-item .item img {
  box-shadow: 0 22px 87px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
#reviews .owl-item.active.center {
  opacity: 1;
}

img {
  max-width: 100%;
  width: 100%;
  height: auto;;
}

Comments

[Максим Тимофеев]

owl не пользуюсь, мне показалась она кривой и доки убогие. Пользуюсь fotorama.io там ресайзить фото и адаптивно встраивать карусель - одно удовольствие.

[ligisayan]

Максим Тимофеев: спасибо, да, когда-то выручала, но в отличие от owl у нее по-моему нет возможности нужного мне центрирования элемента (т.е. один элемент центральный, на нем акцент, а другие элементы частично уходят за пределы экрана) и бесконечной прокрутки(?), когда после последнего элемента идет не прокрутка на первый, а плавная смена один за одним

[Максим Тимофеев]

ligisayan: Да, там по одному выводит или формировать html ы качестве слайда, в котором верстать 3. Но это странно вручную делать.Кстати есть вот еще: kenwheeler.github.io/slick

[ligisayan]

Максим Тимофеев: да, вот эта очень крутая каруселька - спасибо!

Answer 1

[zloygoblin]

попробуйте перенести autoWidth из общих св-в только в нужные брейкпоинты, например так:

responsive: {
    0: {
      items: 1 //здесь нельзя autoWidth, т.к. он картинка должна адаптивиться на малых размерах экрана
    },
    992: {
      items: 2,
      autoWidth:true 
    }
  }

Comments

[ligisayan]

zloygoblin да, супер, отлично - помогло! единственное, я еще к 1200 включил правило center: true,