Как сделать вертикальный слайдер

Как сделать подобный вертикальный слайдер?

Здравствуйте, не могу найти примеры реализации подобного слайдера.Все только с анимациями и без возможности прокрути.

• Вопрос задан 17 июн. 2023
• 112 просмотров

Комментировать

Решения вопроса 0

Ответы на вопрос 1

senator @georgi1984

Нравится JavaScript

На слайдер добавляется событие. При срабатывании события меняются несколько css значений: z-index, размеры, координаты, blur.

Ответ написан 17 июн. 2023

Комментировать

Нравится 1 Комментировать

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

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

ВАЖНО!

Плагин обновился! Данная статья актуальна для 6й версии!

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

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

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

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

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

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

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

В документации приводится необходимая структура для слайдера Swiper

  
  
 
Slide 1
 
Slide 2
 
Slide 3
 .
 
 

Берем ее за основу и верстаем два слайдера

           
 
 
 
Prev
  
 
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Next
 
 
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
     

Добавляем стили

Также для плагина 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', // вертикальная прокрутка >> >); 

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

Как сделать вертикальный слайдер в несколько колонок?

Нужен адаптивный вертикальный слайдер, который бы выводил слайды в несколько колонок. Перепробовал owl, bxslider, swiper. Не могу нагуглить никакого решения. На float, grid, flex без разницы. К примеру вот тут курс криптовалют в строку и он сменяется вертикально https://www.binance.com/en Первый слайд: Второй слайд: А на планшетах и мобильных, чтобы кол-во колонок уменьшалось.

Отслеживать

Валерий Ефремов

задан 14 дек 2021 в 9:27

Валерий Ефремов Валерий Ефремов

1 1 1 бронзовый знак

jsfiddle.net/2g63xcbm вот к примеру, вертикальный слайдер 2 слайда друг под другом. Как сделать чтобы эти 2 слайда были в ряд?

14 дек 2021 в 10:15

Так в чем проблема со свайпером (с owl понятно, он три года как закрыт и переехал на tiny-slider) покажите код, что у вас получилось. Создайте минимальный воспроизводимый пример и все получится.

14 дек 2021 в 11:46

В принципе не понятно зачем для смены двух слайдов какая-то библиотека или плагин

Как сделать вертикальный слайдер в несколько колонок?

Здравствуйте. Нужен адаптивный вертикальный слайдер, который бы выводил слайды в несколько колонок.
Перепробовал owl, bxslider, swiper. Не могу нагуглить никакого решения.
На float, grid, flex без разницы.

К примеру вот тут курс криптовалют в строку и он сменяется вертикально https://www.binance.com/en
Первый слайд:

Второй слайд:

https://jsfiddle.net/2g63xcbm вот к примеру, вертикальный слайдер 2 слайда друг под другом. Как сделать чтобы эти 2 слайда были в ряд?

• Вопрос задан более двух лет назад
• 580 просмотров

7 комментариев

Простой 7 комментариев