Вариант вертикального слайдера с превью на основе Swiper
Сделаем адаптивный вертикальный слайдер на основе плагина Swiper с превью, с возможностью переключать слайды, нажимая на превью или кнопками расположенными рядом, потянув за слайды или колесиком мыши. Если вам понадобится подобный слайдер, сможете взять этот пример за основу
ВАЖНО!
Плагин обновился! Данная статья актуальна для 6й версии!
Результат можно посмотреть на Codepen или в конце статьи
Скачаем плагин Swiper
Для начала скачаем необходимые файлы для плагина Swiper
Переходим на страницу https://swiperjs.com/get-started/
Ищем ссылку https://unpkg.com/swiper/ (можно перейти по ссылке прямо здесь)
Находим 2 файла - swiper-bundle.min.css и swiper-bundle.min.js и сохраняем их в папке с проектом
Ниже будет код структуры, где мы подключим данные файлы
Верстаем структуру
В документации приводится необходимая структура для слайдера Swiper
<!-- Slider main container / Основной контейнер -->
<div class="swiper-container">
<!-- Additional required wrapper / Дополнительный обязательный оборачивающий блок -->
<div class="swiper-wrapper">
<!-- Slides / Слайды -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
</div>
Берем ее за основу и верстаем два слайдера
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Vertical Slider</title>
<link rel="stylesheet" href="css/bootstrap-reboot.min.css"/>
<link rel="stylesheet" href="css/swiper-bundle.min.css"/> <!-- Подключаем стили плагина Swiper -->
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<section class="slider">
<div class="container">
<div class="slider__flex">
<div class="slider__col">
<div class="slider__prev">Prev</div> <!-- Кнопка для переключения на предыдущий слайд -->
<div class="slider__thumbs">
<div class="swiper-container"> <!-- Слайдер с превью -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slider__image"><img src="https://picsum.photos/1920/1080" alt=""/></div>
</div>
<div class="swiper-slide">
<div class="slider__image"><img src="https://picsum.photos/1920/1081" alt=""/></div>
</div>
<div class="swiper-slide">
<div class="slider__image"><img src="https://picsum.photos/1920/1082" alt=""/></div>
</div>
<div class="swiper-slide">
<div class="slider__image"><img src="https://picsum.photos/1920/1083" alt=""/></div>
</div>
<div class="swiper-slide">
<div class="slider__image"><img src="https://picsum.photos/1920/1084" alt=""/></div>
</div>
</div>
</div>
</div>
<div class="slider__next">Next</div> <!-- Кнопка для переключения на следующий слайд -->
</div>
<div class="slider__images">
<div class="swiper-container"> <!-- Слайдер с изображениями -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slider__image"><img src="https://picsum.photos/1920/1080" alt=""/></div>
</div>
<div class="swiper-slide">
<div class="slider__image"><img src="https://picsum.photos/1920/1081" alt=""/></div>
</div>
<div class="swiper-slide">
<div class="slider__image"><img src="https://picsum.photos/1920/1082" alt=""/></div>
</div>
<div class="swiper-slide">
<div class="slider__image"><img src="https://picsum.photos/1920/1083" alt=""/></div>
</div>
<div class="swiper-slide">
<div class="slider__image"><img src="https://picsum.photos/1920/1084" alt=""/></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="js/swiper-bundle.min.js"></script> <!-- Подключаем js-файл плагина Swiper -->
<script src="js/main.js"></script>
</body>
</html>
Добавляем стили
Также для плагина Swiper есть дополнительное условие - указать размеры для .swiper-container
В данном случае указываем высоту и ширину .swiper-container по 100%
body {
background: #121212;
}
.slider {
padding: 32px;
color: #fff;
}
.slider .swiper-container {
width: 100%;
height: 100%;
}
.slider__flex {
display: flex;
align-items: flex-start;
}
.slider__col {
display: flex;
flex-direction: column;
width: 150px;
margin-right: 32px;
}
.slider__prev,
.slider__next {
cursor: pointer;
text-align: center;
font-size: 14px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slider__prev:focus,
.slider__next:focus {
outline: none;
}
.slider__thumbs {
height: calc(400px - 96px);
}
.slider__thumbs .slider__image {
transition: 0.25s;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.5;
}
.slider__thumbs .slider__image:hover {
opacity: 1;
}
.slider__thumbs .swiper-slide-thumb-active .slider__image {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity: 1;
}
.slider__images {
height: 400px;
}
.slider__images .slider__image img {
transition: 3s;
}
.slider__images .slider__image:hover img {
transform: scale(1.1);
}
.slider__image {
width: 100%;
height: 100%;
border-radius: 30px;
overflow: hidden;
}
.slider__image img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 767.98px) {
.slider__flex {
flex-direction: column-reverse;
}
.slider__col {
flex-direction: row;
align-items: center;
margin-right: 0;
margin-top: 24px;
width: 100%;
}
.slider__images {
width: 100%;
}
.slider__thumbs {
height: 100px;
width: calc(100% - 96px);
margin: 0 16px;
}
.slider__prev,
.slider__next {
height: auto;
width: 32px;
}
}
Инициализируем плагин
Все возможные параметры и настройки доступны на странице https://swiperjs.com/api/
Ниже код с комментариями
// Инициализация превью слайдера
const sliderThumbs = new Swiper('.slider__thumbs .swiper-container', { // ищем слайдер превью по селектору
// задаем параметры
direction: 'vertical', // вертикальная прокрутка
slidesPerView: 3, // показывать по 3 превью
spaceBetween: 24, // расстояние между слайдами
navigation: { // задаем кнопки навигации
nextEl: '.slider__next', // кнопка Next
prevEl: '.slider__prev' // кнопка Prev
},
freeMode: true, // при перетаскивании превью ведет себя как при скролле
breakpoints: { // условия для разных размеров окна браузера
0: { // при 0px и выше
direction: 'horizontal', // горизонтальная прокрутка
},
768: { // при 768px и выше
direction: 'vertical', // вертикальная прокрутка
}
}
});
// Инициализация слайдера изображений
const sliderImages = new Swiper('.slider__images .swiper-container', { // ищем слайдер превью по селектору
// задаем параметры
direction: 'vertical', // вертикальная прокрутка
slidesPerView: 1, // показывать по 1 изображению
spaceBetween: 32, // расстояние между слайдами
mousewheel: true, // можно прокручивать изображения колёсиком мыши
navigation: { // задаем кнопки навигации
nextEl: '.slider__next', // кнопка Next
prevEl: '.slider__prev' // кнопка Prev
},
grabCursor: true, // менять иконку курсора
thumbs: { // указываем на превью слайдер
swiper: sliderThumbs // указываем имя превью слайдера
},
breakpoints: { // условия для разных размеров окна браузера
0: { // при 0px и выше
direction: 'horizontal', // горизонтальная прокрутка
},
768: { // при 768px и выше
direction: 'vertical', // вертикальная прокрутка
}
}
});
Получаем следующий результат
На странице https://swiperjs.com/demos/ можно посмотреть различные решения для слайдеров
Итоги
Когда понадобится реализовать подобный слайдер, вы уже будете знать, где можно посмотреть пример :)
Буду рад, если статья оказалась полезной
Спасибо за ваше внимание и уделённое время!
Похожие записи
Выбор диапазона значений на основе плагина noUiSlider
В статье рассмотрим один из вариантов, как сделать выбор диапазона значений, который обычно используется в фильтрах интернет-магазинов
Создаём графики на основе плагина Chart.js (обновлено 17.08.2021)
В данной статье рассмотрим вариант создания графиков на основе плагина Charts.js
