Почему slick slider режет изображение?

Question

[Андрей]

Проект большой.
Есть блок .column (225px) внтури которого изображение большего размера (850px). Нормальное поведение когда изображение вылезает за пределы блока. Это хорошо, так нужно.
Внедрил slick. Теперь изображение заполняет блок(при этом у картинки нет max-width: 100%), т.е. уменьшается до 225px в ширину. Добавил img { width: auto; } и она стала обрезаться.

Сейчас на проекте что-то типа такого:

<div class="content">  
    <div class="column">
      <div class="slider">
        <div><img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' /></div>
      </div>
    </div>
  </div>

.content { display: inline-block; }
.column {float:right; width:225px;}
.slider img { width: auto;}

Надо чтобы было так. Но по факту получается так.

overflow: hidden нигде не нашел (да и до слайдера все было хорошо). В то что вставляет слайдер (js'ом) в инспекторе смотрю, тоже ничего похожего.

Ковыряю настройки слайдера - так же ничего не смог найти.

В чем может быть проблема? Возможно как-то переопределить правило для изображения?

Answer 1

[sergey]

у slick-slider по умолчанию overflow: hidden;

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list это контейнер для .slick-slide (ваших item/картинок)

Comments

[Андрей]

убирал и менял на visible, не помогает

[sergey]

Андрей: что значит не помогает? Вы можете код на jsfiddle полностью выложить что бы понять что у Вас не получается?

[Андрей]

все, спасибо) помогло, прошу прощения. менял на hidden при немного других условиях, сейчас все заработало