RealAdmin.ru

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

jQuery
Категория: Сайтострой
22 авг 2018 г. в 09:28

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

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

 $(function(){
    $('.slick-vertical').slick({
        vertical: true,
        verticalSwiping: true,
        slidesToShow: 3,
        autoplay: true,
    });
});
1
2
3
4
5
6
ПараметрТипDefaultОписание
verticalbooleanfalseВертикальный режим
verticalSwipingbooleanfalseПрокрутка «свайпом» по вертикали
slidesToShowint1Количество видимых слайдов
autoplaybooleanfalseАвтоматическая прокрутка

Чтобы стрелки из горизонтального положения трансформировались в вертикальные как в примере, требуется применить 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">'
    });
});
1
2
3
4
5
6

Стили:

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

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

Теги:
Посмотрите похожее — 6
Комментарии —
    © REALADMIN.RU   2018 г.
    Страница сгенерирована: 0,6072 s | 10 mb.
    На каком уровне Вы играете в шахматы?
    О П Р О С
    Home Question Top