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

Вертикальный слайдер для сайта
Комментарии: 14

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

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

Инициализируем запуск 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.

Темы:
jQuery
Ещё интересное — 6
Комментарии —
  1. Виктор
    Виктор27 ноября 2018, 18:01(был изменён)#
    Как сделать чтобы в вертикальном режиме работала прокрутка по клику touchMove на слайде? То есть к примеру при клике по крайним слайдам происходила прокрутка к следующему элементу…
    1. Andy Si27 ноября 2018, 21:45#
      Параметры
      focusOnSelect: 1,
      centerMode: true,
      И ограничить высоту слайдера стилями, если будут вылазить все слайды.
    2. Жума Алимбаевич
      Жума Алимбаевич10 января 2019, 17:32(был изменён)#
      $(document).ready(function (){            
        $("#newsticker").jCarouselLite({
          vertical: true,
          hoverPause: true,
          btnPrev:"#news-prev",
          btnNext:"#news-next",
          visible:3,
          auto: 1000,
          speed:500
      });
      
      почему не работает? подключения все в норме
      1. Kostya
        Kostya18 августа 2022, 19:24(был изменён)#
        $('.slick-vertical').slick({
                    vertical: true,
                    verticalSwiping: true,
                    slidesToShow: 4,
                    autoplay: false,
                    infinite: false,
                    prevArrow: '<img src="/images/lefts.png">',
                    nextArrow: '<img src="/images/rights.png">',
              		responsive:[
        			{
        				breakpoint: 589.5,
        				settings: {
        					slidesToShow: 1,
                            arrows: false,
                            				    vertical: false,
                            verticalSwiping: false,
                            prevArrow: false,
                            nextArrow: false,
                            
        				}
        			}
                    ]
                });
        
        Подскажите почему стрелки попадают в слайды после того срабатывает breakpoint? и как от этого избавиться?
        1. Andy Si18 августа 2022, 23:44#
          Надо вёрстку смотреть, здесь всё нормально
          1. Kostya
            Kostya19 августа 2022, 10:26(был изменён)#
            Тут я разобрался. Вот теперь не могу стилизовать точки.
            Что я только не пробовал в css:
            .slick-vertical .slick-dots button li{
            margin-top: -20px;
            width:20px;
            height:20px;
            color: green;
            }
            и так 
            .slick-vertical .slick-dots button{
            margin-top: -20px;
            width:20px;
            height:20px;
            color: green;
            }
            и так
            .slick-vertical .slick-dots{
            margin-top: -20px;
            width:20px;
            height:20px;
            color: green;
            }
            
            Ноль реакции. Подскажите, плиз.
            1. Andy Si19 августа 2022, 10:40(был изменён)#
              Ссылка нужна на страницу, где проблема. Так непонятно где они выводятся и что именно не так.
              1. Andy Si19 августа 2022, 10:51#
                Точки стилизуются через псевдокласс .slick-dots li button::before
                Размер регулируется свойством font-size.
                1. Kostya
                  Kostya19 августа 2022, 11:04#
                  .slick-vertical.slick-dots li button::before{
                  font-size: 50px;
                  }

                  так тоже не работает

                  http://surin89-new.tmweb.ru/chita/neonchita/apple-watch-7-dt-no-1
                  задача сделать точки больше, изменить цвет, поднять выше
                  1. Andy Si19 августа 2022, 11:52#
                    Там сейчас точки отключены. Меняй стили в slick-theme.css, там они все прописаны. Единственно, они будут применяться ко всем slick слайдерам на сайте.
                    1. Kostya
                      Kostya19 августа 2022, 14:23#
                      Спасибо огромное. Все настроил
          2. Пенис Душилин
            Пенис Душилин20 сентября 2022, 11:13#
            Ajax дольго реагирует. Осень дольго!
            1. Дмитрий
              Дмитрий16 ноября 2022, 12:11#
              Есть вертикальный слайдер. Хочу чтобы на мобильных разрешениях при смахивании перелистывался только 1 слайд, slidesToScroll: 1 — не помогает
              const $slider = $("#full-page-slider");
              if ($slider.length) {
                  $slider.on('init', () => {
              		mouseWheel($slider)
              	})
              	.slick({
              		dots: false,
              		vertical: true,
                      verticalSwiping: true,
                      slidesToShow: 1,
                      slidesToScroll: 1,
                      autoplay: false,
                      arrows:false,
                      swipeToSlide: true,
                      adaptiveHeight:true,
                      infinite: false,
                      touchThreshold:8,
                      focusOnSelect:true,
                      
              	})
              
              1. Andy Si16 ноября 2022, 13:28#
                Значит по каким-то причинам в вашем случае slidesToScroll: 1 не применяется и берется какое-то другое значение. Надо смотреть на боевом примере — что-то не так сделано.
              © REALADMIN.RU   2022 г.
              Страница сгенерирована: 0,1976 s | 4 mb.
              На каком уровне Вы играете в шахматы?
              OPROS