Вертикальный слайдер для сайта

Для создания вертикального слайдера на сайте воспользуемся jquery плагином «Slick Slider». Это дополнение имеет множество параметров и позволяет гибко настраивать внешний вид слайдов и навигационных стрелок. Переходим к примерам.

• Скачайте и подключите «Slick Slider».
• Создайте разметку слайдера из «div» блоков, пример смотрите по верхней ссылке.

Инициализируем запуск js скрипта с параметрами:

         $(function(){
            $('.slick-vertical').slick({
                vertical: true,
                verticalSwiping: true,
                slidesToShow: 3,
                autoplay: true,
            });
        });

Чтобы стрелки из горизонтального положения трансформировались в вертикальные, требуется применить CSS стили:

.slick-prev, 
.slick-next {
    -webkit-transform: translate(-50%, 0) rotate(90deg);
    -ms-transform: translate(-50%, 0) rotate(90deg);
    transform: translate(-50%, 0) rotate(90deg);
    left: 50%;
}
    
.slick-prev {
    top: -10px;
}

.slick-next {
    top: auto;
    bottom: -20px;
}

Изменение стрелок

Для изменения внешнего вида навигационных стрелок можно использовать любые изображения. Для этого в вызове вертикального слайдера укажем пути к изображениям и пропишем для них стили.

 $(function(){
    $('.slick-vertical').slick({
        vertical: true,
        verticalSwiping: true,
        slidesToShow: 3,
        autoplay: true,
        prevArrow: '<img src="/img/up.svg">',
        nextArrow: '<img src="/img/down.svg">'
    });
});

Стили:

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

Скачать стрелки можете здесь: up.svg и down.svg.