Как задать отступы между слайдами в SLICK?

Question

[Novamoscow]

Слайдер сам считает ширину слайдов(можно ли как то самому задавать ширину ?), подстроился более менее с помощью задания ширины контейнера где лежит сам слайдер.
НО возникла проблема, задал 10 слайдов в 2 строки (по 5 в каждой) . Но ни как не могу задать отступы между слайдами.

Ссылка на офф страницу слайдера kenwheeler.github.io/slick

Код слайдера

$(document).ready(function () {
        $('.slaider-spares').slick({
            slidesToShow: 5,
            slidesToScroll: 1,
            rows: 2,
        });
    });

Answer 1

[iBird Rose]

задаешь стили для .slick-slide {padding: 0 15px;} к примеру. а для контейнера margin: 0 -15px;

Comments

[Novamoscow]

а реально как то для этого задать свой класс? Чтобы удобно было создавать несколько слайдеров и задавать разные отступы

[iBird Rose]

Novamoscow: ну тк задавай. кто мешает то?

[Novamoscow]

iBird Rose: Не работает этот способ, расстояния между слайдами не меняются. Марджин тоже пробовал задавать для слайда

[iBird Rose]

Novamoscow: задавай значит внутренним элементам https://jsfiddle.net/9a5qf3uL/

[Novamoscow]

iBird Rose: Спасибо помогло! а не знаете по какой причине он задает ширину элементам сам и как с этим бороться ?

[iBird Rose]

Novamoscow: ну у slick такой подход. что ты суешь его в нужный тебе контейнер - он в нем уже сам распределяет ширину слайдов. это нормально. и в большинстве случаев удобно. тем более когда речь идет о адаптивном слайдере.

[Novamoscow]

iBird Rose: минус только когда ститичные картинки вставляешь, результат будет как будто блок поехал.

[Novamoscow]

iBird Rose: а не знаете еще почему когда респосив задаешь и пытаешься уменьшить кол - во строк до одной, он этого не делает. Причини я так понимаю в том что до настроек респонсив задано 2 строки Но на увелечение количество строк работает нормально

[iBird Rose]

Novamoscow: не знаю. с row не работал

[Егор Живагин]

Novamoscow: читайте доки внимательнее) Чтобы слик перестал корректировать ширину ставим variableWidth: true, и задаём её сами. Это просто.

Про row... Там, наверное, надо не только его менять, но и свойство - количество слайдов в строке. Но я не уверен

[Novamoscow]

Егор Живагин: да с англ. беда ) тебе тоже спасибо за помощь, буду тестить!)

[zhandapanda]

Спасибо тебе, добрый человек! Кучу времени потратил казалось бы на мелкую вещь.

[Антон Вебсайтовский]

iBird Rose, работает.

Answer 2

[kos88]

.slider_wrap * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.slick-slide { margin: 0 10px;}
.slider-item img { max-width: 100%;}

Comments

[Антон Вебсайтовский]

Рабочая схема.

Answer 3

[Владимир Куликов]

В 2021 достаточно родителю слайдов задать такие стили

column-gap: 78px
flex-wrap: wrap
row-gap: 0px

Comments

[ivankrm]

safari плохо поддерживает!