Как настроить Slick слайдер, чтобы слайды центрировались?

Question

[Андрей Еськов]

Подскажите пожалуйста. Есть слайдер kenwheeler.github.io/slick

Простая структура

<div class="main-slider">
            <div>
                <a class="main-slider__slide" href="#">
                    <img src="/img-1.jpg">
                </a>
            </div>
            <div>
                <a class="main-slider__slide" href="#">
                    <img src="/img-2.jpg">
                </a>
            </div>
</div>

И простой js соответственно

$(document).ready(function(){
        $('.main-slider').slick({

        });
    });

Теперь суть. Ширина слайдера 1920. Подскажите как сделать так чтобы при уменьшении дисплея, центр картинки оставался по центру. а края скрывались, попробую на картинки показать.

Comments

[Конан Варвар]

Без песочницы не разобраться :)

[Ankhena]

Сложить слайдер в обертку. Обертке задать нужный overflow. Блоку со слайдером задать позиционирование по центру.
Еще можно картинки задавать фоном, а не img, если это подходит по семантике и они не нужны поисковику

[Андрей Еськов]

В ТЗ важно чтобы картинка была картинкой. Ваш вариант тоже работает спасибо большое!

Answer 1

[Михаил Захаров]

a {
  height: 100px;
  width: 100px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
img {
  height: 100%;
  display: block;
  margin: auto;
}

Comments

[Михаил Захаров]

Высота и ширина ссылки просто как пример ) Все остальное копируйте )

[Андрей Еськов]

Какой раз уже выручают Flex,ы по-моему пришло время разобраться в этой теме детально.

Спасибо большое добрый человек))) Всё сработало и ничего не поломалась))))

[Михаил Захаров]

Андрей Еськов: рад помочь )