kacharin / DEV-Blog

,

Простой слайдер с nav-баром

Создание Продвинутого Слайдера для Продуктов с Использованием Slick Slider

a.kacharin

В этой статье мы рассмотрим, как создать стильный и удобный слайдер для отображения продуктов на вашем веб-сайте с использованием популярной библиотеки Slick Slider. Мы используем HTML, CSS и Slick Slider для создания интерфейса, который предоставляет пользователю удобные возможности для навигации и просмотра продуктов.

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

Особое внимание уделим возможности настройки стилей и поведения слайдера с использованием Slick Slider API. Также мы рассмотрим добавление дополнительных элементов управления, таких как кнопки «Предыдущий» и «Следующий», а также добавление эффектов переходов для улучшения визуального опыта.

Использование Slick Slider предоставляет не только удобные средства для создания слайдера, но и гарантирует быструю и плавную работу на вашем веб-сайте. Этот слайдер не только улучшит визуальное представление продуктов, но и сделает взаимодействие пользователя с вашим веб-сайтом более приятным и эффективным.

HTML-Структура:

<div class="product-show__slider">

    <div class="product-show__slider-nav">
        <div class="product-show__slide-nav">
            <img src="https://kach.dvizh.net/wp-content/uploads/2024/01/7a9ebe714be01a05afdbc1626335ffee.jpg" alt="nav">
        </div>
        <div class="product-show__slide-nav">
            <img src="https://kach.dvizh.net/wp-content/uploads/2024/01/Canada-Yoho-lake-forest-mountains-trees-reflection_2560x1440.jpg"
                alt="nav">
        </div>
        <div class="product-show__slide-nav">
            <img src="https://kach.dvizh.net/wp-content/uploads/2024/01/otrazhenie-zakata-i-gor-v-ozere.jpg" alt="nav">
        </div>
        <div class="product-show__slide-nav">
            <img src="https://kach.dvizh.net/wp-content/uploads/2024/01/7a9ebe714be01a05afdbc1626335ffee.jpg" alt="nav">
        </div>
    </div>

    <div class="product-show__slider-preview-container img-fly">
        <div class="product-show__slider-preview ">
            <div class="product-show__slide-preview">
                <img src="https://kach.dvizh.net/wp-content/uploads/2024/01/7a9ebe714be01a05afdbc1626335ffee.jpg"
                    alt="preview">
            </div>
            <div class="product-show__slide-preview">
                <img src="https://kach.dvizh.net/wp-content/uploads/2024/01/Canada-Yoho-lake-forest-mountains-trees-reflection_2560x1440.jpg"
                    alt="preview">
            </div>
            <div class="product-show__slide-preview">
                <img src="https://kach.dvizh.net/wp-content/uploads/2024/01/otrazhenie-zakata-i-gor-v-ozere.jpg"
                    alt="preview">
            </div>
            <div class="product-show__slide-preview">
                <img src="https://kach.dvizh.net/wp-content/uploads/2024/01/7a9ebe714be01a05afdbc1626335ffee.jpg"
                    alt="preview">
            </div>
        </div>
        
        <div class="catalog-product-tag-panel">
            <div class="icon_bg favorit_icon add-to-favorites-button">
                <div class="favorite"></div>
            </div>
        </div>

    </div>

</div>
  1. Контейнер слайдера (product-show__slider):
    • Класс: product-show__slider
    • Идентификатор: nav-bar-slider
    • Описание: Главный контейнер слайдера, объединяющий все элементы.
  2. Навигационный слайдер (product-show__slider-nav):
    • Класс: product-show__slider-nav
    • Описание: Контейнер для миниатюрных изображений продуктов, предназначенных для навигации.
  3. Слайды навигационного слайдера (product-show__slide-nav):
    • Класс: product-show__slide-nav
    • Описание: Каждый слайд содержит миниатюру изображения продукта.
  4. Контейнер предпросмотра слайдера (product-show__slider-preview-container):
    • Класс: product-show__slider-preview-container img-fly
    • Описание: Область, где отображаются основные изображения продуктов и добавлены дополнительные элементы управления.
  5. Слайдер предпросмотра (product-show__slider-preview):
    • Класс: product-show__slider-preview
    • Описание: Слайдер, где отображаются основные изображения продуктов с возможностью прокрутки.
  6. Слайды предпросмотра (product-show__slide-preview):
    • Класс: product-show__slide-preview
    • Описание: Каждый слайд содержит основное изображение продукта.
  7. Панель тегов продукта (catalog-product-tag-panel):
    • Класс: catalog-product-tag-panel
    • Описание: Дополнительная панель, добавленная для элементов управления или информации о продукте.
  8. Иконка «Добавить в избранное» (favorit_icon add-to-favorites-button):
    • Класс: favorit_icon add-to-favorites-button
    • Описание: Иконка, предоставляющая пользователю возможность добавить продукт в избранное.

JavaScript (Инициализация Swiper):

const initSliders = () => {
    const previewSliderClass = '.product-show__slider-preview';
    const navSliderClass = '.product-show__slider-nav';

    const $sliderPreview = $(previewSliderClass)
    const $sliderNav = $(navSliderClass)
    $sliderPreview.slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        dots: true,
        asNavFor: navSliderClass,
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    fade: false,
                }
            }
        ],
    });
    $sliderNav.slick({
        arrows: true,
        prevArrow: '',
        nextArrow: '',
        vertical: true,
        swipeToSlide: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        focusOnSelect: true,
        asNavFor: previewSliderClass
    });

    $('.related-sliders.catalog').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        arrows: true,
        dots: false,
        infinite: true,
    });

}

jQuery(function ($) {
    initSliders();
})
  1. Инициализация слайдеров с использованием Slick Slider в JavaScript:
    • Код: initSliders()
    • Описание: Функция инициализации слайдеров с настройками для предпросмотра, навигации и дополнительных слайдеров.
  2. Инициализация при загрузке страницы (jQuery(function ($) {…})):
    • Код: jQuery(function ($) {...})
    • Описание: Блок кода, который инициализирует слайдеры при загрузке страницы.

Css стили:

.product-show__slider {
    --ps-slider-heigth: 400px;
    --ps-slider-width: 600px;
    height: max-content;
    display: grid;
    grid-template-columns: 100px auto;
    grid-column-gap: 10px;
    position: relative;
    margin-right: 30px;
}

.product-show__slider-model-data {
    margin-top: 16px;
    grid-column: 2;
    font-size: 14px;
    font-weight: 400;
    line-height: 130%;
}

.product-show__slider-nav {
    width: 100%;
    height: var(--ps-slider-heigth);
    padding: 15px 0;
    overflow: hidden;
}

.product-show__slider-nav .slick-track {
    flex-direction: column;
}

.slick-vertical .slick-arrow {
    width: 30px;
    display: block;
    margin: 0 auto;
    cursor: pointer;
}

.slick-vertical .slick-arrow:hover {
    opacity: .6;
}

.product-show__slider-nav .slick-list {
    height: var(--ps-slider-heigth) !important;
}

.product-show__slider-nav .slick-arrow {
    transform: translateY(-50%);
}

.product-show__slide-nav {
    position: relative;
    height: 98px;
    width: 100%;
    background: var(--color-primary);
    margin: 5px 0;
    cursor: pointer;
}

.product-show__slide-nav img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 15px;
}

.product-show__slide-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    z-index: 1;
}

.product-show__slide-nav.slick-current::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: unset;
    z-index: 1;
}

.product-show__slide-preview {
    height: var(--ps-slider-heigth) !important;
    background: var(--color-primary);
    border-radius: 5px;
    overflow: hidden;
}

.product-show__slide-preview img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 25px;
}

.product-show__slider-preview .slick-dots {
    z-index: 1000;
    width: calc(100% - 40px);
    height: 4px;
    position: absolute;
    bottom: 20px;
    left: 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0 20px;

}

.product-show__slider-preview .slick-dots li {
    flex-grow: 1;
    flex-shrink: 0;
    text-align: center;
    height: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: 200ms;
    margin: 0;
    width: 4px;
}

.product-show__slider-preview .slick-dots li.slick-active {
    background: #FF800D;
}

.product-show__slider-preview .slick-dots li {
    background: #d6dbe0;
    border-radius: 15px;
    height: 4px;
    margin: 0 5px;
}

.product-show__slider-preview .slick-dots li button {
    background: unset;
    height: 100%;
}

.product-show__slider-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1002;
    backdrop-filter: blur(7.5px);
    display: flex;

}

.catalog-product-tag-panel {
    position: absolute;
    top: 10px;
    right: 10px;
}

.product-show__slider-modal .slick-list,
.product-show__slider-modal .slick-track {
    height: 100%;
}

.product-show__slider-modal .slick-arrow {
    position: fixed;
    content: '';
    top: 0;
    height: 100%;
    cursor: pointer;
    z-index: 20;
}

.product-show__slider-modal .slick-prev {
    left: 43px;
}

.product-show__slider-modal .slick-next {
    right: 43px;
}

.product-show__slide-modal {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-show__slide-modal img {
    object-fit: contain;
    height: 100%;
}

.product-show__slider-modal-close {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 21;
    background: white;
    box-sizing: content-box;
    padding: 32px;
}

.product-show__slider-preview-2 {
    width: 100%;
}

.product-show__slider-preview-container {
    max-width: calc(var(--ps-slider-width) - 60px);
    position: relative;

}

.favorite {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none' slick-uniqueid='3'%3E%3Crect x='0.0739746' y='0.0739746' width='35.8519' height='35.8519' rx='17.9259' fill='white'/%3E%3Cpath d='M18.1274 27.4646L18.1244 27.4663C18.0844 27.4891 18.0417 27.5 18 27.5C17.9583 27.5 17.9156 27.4891 17.8756 27.4663L17.8726 27.4646C17.6731 27.3525 15.0537 25.838 12.4914 23.4575C9.90765 21.057 7.50013 17.8849 7.5 14.4601C7.50175 12.8708 8.09795 11.3525 9.14936 10.2371C10.1998 9.12276 11.6175 8.50184 13.0896 8.5C14.9594 8.50009 16.5811 9.34982 17.5919 10.778L18 11.3546L18.4081 10.778C19.4189 9.34982 21.0406 8.50009 22.9104 8.5C24.3825 8.50184 25.8002 9.12276 26.8506 10.2371C27.9021 11.3526 28.4983 12.8709 28.5 14.4604C28.4998 17.8851 26.0923 21.0571 23.5086 23.4575C20.9463 25.838 18.3269 27.3525 18.1274 27.4646Z' stroke='%23FF800D'/%3E%3Cdiv xmlns=''%3E%3Ca xmlns='http://www.w3.org/2000/svg' id='slick_uniqueid'/%3E%3C/div%3E%3C/svg%3E");
    display: inline-block;
    width: 36px;
    height: 36px;
}

Просмотреть пример

Ссылка на библиотеку

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Trending