Вариант вертикального слайдера с превью на основе Swiper

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

Результат можно посмотреть на Codepen или в конце статьи

Скачаем плагин Swiper

Для начала скачаем необходимые файлы для плагина Swiper

Переходим на страницу https://swiperjs.com/get-started/

Ищем ссылку https://unpkg.com/swiper/ (можно перейти по ссылке прямо здесь)

'1'

Находим 2 файла - swiper-bundle.min.css и swiper-bundle.min.js и сохраняем их в папке с проектом

'2'

Ниже будет код структуры, где мы подключим данные файлы



Верстаем структуру

В документации приводится необходимая структура для слайдера 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', // вертикальная прокрутка
		}
	}
});


Получаем следующий результат

Prev
Next


На странице https://swiperjs.com/demos/ можно посмотреть различные решения для слайдеров



Итоги

Когда понадобится реализовать подобный слайдер, вы уже будете знать, где можно посмотреть пример :)

Буду рад, если статья оказалась полезной

Спасибо за ваше внимание и уделённое время!