Slick Slider

Slick Slider — jQuery плагин, обеспечивающий большую часть стандартного функционала типичного слайдера в интерфейсе. Собрал в одном месте частые решения возникающих проблем, чтобы всегда было под рукой.

§ Инициализация слайдера

$(`.js-slider`).not(`.slick-initialized`).each(function () {
    const $this = $(this);

    $this.slick();
});

§ Скрыть слайдер до инициализации

.slick-slider {
    display: none;

    &.slick-initialized {
        display: block;
    }
}

Или по-другому, через свойство visibility:

.slick-slider {
    visibility: hidden; 

    &.slick-initialized {
        visibility: visible;
    }
}

§ Отступы между слайдами

:root {
  --slide-margin: 1.5rem;
}

.slick-list {
    margin-left: calc(-1 * var(--slide-margin));
    margin-right: calc(-1 * var(--slide-margin));
}

.slick-slide {
    margin-left: var(--slide-margin);
    margin-right: var(--slide-margin);
}

Демо на jsfiddle.

§ Слайды одинаковой высоты

.slick-track {
    display: flex;
}

.slick-slide {
    display: flex;
    height: auto;
}

§ Убрать обводку у слайдов

.slick-slide {
    outline: none;
}

§ Кастомная пагинация

Пример пагинации с тамбнейлами.

<div class="slider js-slider">
    <div class="slider__slide" data-slide-thumb="https://via.placeholder.com/100x70/000/FFF/">
        <img src="https://via.placeholder.com/600x450/" alt="" class="slider__img">
    </div>
    <div class="slider__slide" data-slide-thumb="https://via.placeholder.com/100x70/000/FFF/">
        <img src="https://via.placeholder.com/600x450/" alt="" class="slider__img">
    </div>
    <div class="slider__slide" data-slide-thumb="https://via.placeholder.com/100x70/000/FFF/">
        <img src="https://via.placeholder.com/600x450/" alt="" class="slider__img">
    </div>
</div>

{
    dots: true,
    customPaging: (slick, index) => {
        return `<button type="button" class="slider__thumb" style="background-image: url('${ $(slick.$slides[index]).data('slide-thumb') }');">${ index }</button>`;
    },
}

§ Вывод текущего и общего количества слайдов

<div class="slider js-slider">
    <div class="slider__inner js-slider-inner">
        <div class="slider__slide">
            <img src="https://via.placeholder.com/300x200" alt="" class="slider__img">
        </div>
        <div class="slider__slide">
            <img src="https://via.placeholder.com/300x200" alt="" class="slider__img">
        </div>
        <div class="slider__slide">
            <img src="https://via.placeholder.com/300x200" alt="" class="slider__img">
        </div>
        <div class="slider__slide">
            <img src="https://via.placeholder.com/300x200" alt="" class="slider__img">
        </div>
    </div>
    
    <footer class="slider__data js-slider-data"></footer>
</div>

$(`.js-slider-inner`).not(`.slick-initialized`).each(function () {
    const $this = $(this);
    const $slider = $this.closest(`.js-slider`);

    $this.on(`init reInit afterChange`, function (event, slick, currentSlide, nextSlide) {
        const i = (currentSlide ? currentSlide : 0) + 1;

        $slider.find(`.js-slider-data`).html(`${ i } / ${ slick.slideCount }`);
    });
});

Демо на jsfiddle.

§ Слайды с тенью

<div class="slider js-slider">
    <div class="slider__item">
        <img src="https://via.placeholder.com/300x200" alt="" class="slider__img">
    </div>

    <div class="slider__item">
        <img src="https://via.placeholder.com/300x200" alt="" class="slider__img">
    </div>

    <div class="slider__item">
        <img src="https://via.placeholder.com/300x200" alt="" class="slider__img">
    </div>
</div>

:root {
    --slide-margin: 3rem;
}

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

.slider {
    $self: &;
    
    display: none;
    margin-bottom: calc(-1 * var(--slide-margin));
    margin-left: calc(-1 * var(--slide-margin));
    margin-top: calc(-1 * var(--slide-margin));
    overflow: hidden;
    padding: var(--slide-margin);
    width: calc(100% + var(--slide-margin) * 2);
        
    &.slick-initialized {
        display: block;
    }
    
    &__item {
        border: 1px solid #dedede;
        margin-bottom: var(--slide-margin);
        margin-left: var(--slide-margin);
        margin-top: var(--slide-margin);
        
        &:hover {
            box-shadow: 0 0 1rem rgba(75, 105, 172, 0.5);
        }
    }

    &__img {
        width: 100%;
    }
    
    .slick-list {
        margin-left: calc(-1 * var(--slide-margin));
        overflow: visible;
    }
}

Демо на jsfiddle.

§ Баги

Баг с параметром rows

В версии 1.8.1 обнаружен баг в миницированной версии скрипта. Параметр rows не изменяется в настройках responsive. Следует использовать версию без минификации.

Проблемы внутри флекс родителя

Слайдер выполняет неправильный расчет размеров в блоке с флекс родителем. Для корректной работы родителю слайдера следует указать такие стили.

.flex-parent {
    min-height: 0;
    min-width: 0;
}