RealAdmin.ru

Slick slider — jquery слайдер с большими возможностями

jQuery,Веб-дизайн
Категория: Сайтострой
26 Июл 2015 г. в 22:19

Slick slider — это jquery плагин, который позволяет создать на сайте адаптивный слайдер любой сложности. Его функионал позволяет реализовывать зацикливание, автопроигрывание, эффект перехода, динамичское добавление слайдов и многое другое. Отдельно выделю возможность пролистывания слайдера пальцем на мобильных устройствах.

Скачать Slick slider 1.6.0

Для подключения указываем путь к jquery библиотеке, непосредственно к «slick slider», основным стилям и пользовательским стилям для оформления элементов слайдера.

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="/slick/slick.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="/slick/slick-theme.css"/>

В отличии от большинства решений, кадры размещаются не в списке, а в блоках:

<div class="slider single-item">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

Примеры использования слайдера

Далее предлагаю рассмотреть примеры реализации слайдера с разными настройками. Посмотрим, как вывести один слайд или сразу несколько.

Вызов без параметров

При вызвове плагина без параметров получаем простой вариант с одним слайдом на странице и навигационные стрелки.

    $('.single-item').slick();
1
2
3
4
5
6

Показ нескольких слайдов

В примере мы установили для «slick slider» параметры зацикленной прокрутки, включили отображение навигационных точек, указали количество отображаемых и прокручиваемых слайдов.

    $('.multiple-items').slick({
      infinite: true,
      dots: true,
      slidesToShow: 3,
      slidesToScroll: 3
    });
1
2
3
4
5
6

Режим центрирования

В режиме центрирования активный слайд устанавливается по центру.

    $('.center').slick({
      centerMode: true,
      slidesToShow: 3,
    });
1
2
3
4
5
6

Центральный слайд имеет класс «slick-center», а значит можно его отдельно оформить.

Настройка slick slider

В таблице приведены основные настройки слайдера. Полный перечень стоит искать на сайте разработчика.

ПараметрТипDefaultОписание
adaptiveHeightbooleanfalseВключает адаптирование высоты для одиночкного слайда горизонтальной карусели
autoplaybooleanfalseАвтоматическая прокрутка
autoplaySpeedint(ms)3000Скорость автопрокрутки в милисекундах
arrowsbooleantrueПоказ/скрытие навигационных кнопок
prevArrowhtmlbuttonЗамена стандартной кнопки Preview
nextArrowhtmlbuttonЗамена стандартной кнопки Next
dotsbooleanfalseПоказ/скрытие навигационных точек под слайдером
draggablebooleantrueВключает/выключает способность перелистывания слайдера перетаскиванием мышью
fadebooleanfalseЭффект затухания при перелистывании слайдов
focusOnSelectbooleanfalseУстанавливает фокус на выбранный элемент карусели при клике
easingstring'linear'Анимационные эффекты перехода, их набор зависит от подключенных jQuery Easing плагинов
edgeFrictioninteger0.15Сопротивление при попытки прокрутить карусель, когда дальше нет слайдов и она не зацилена
infinitebooleantrueБесконечное прокручивание (зацикливание)
initialSlideinteger0Номер слайда, с которого начинать показ
lazyLoadstring'ondemand'Тип подгрузки слайдов. Принимает 'ondemand' или 'progressive'
pauseOnHoverbooleantrueПауза автопроигрывания при наведении мыши
pauseOnDotsHoverbooleanfalseПауза автопроигрывания при наведении мыши на навигационные точки
pauseOnHoverbooleantrueПауза автопроигрывания при наведении мыши
rowsint1 Может быть 'window', 'slider' или 'min'
infinitebooleantrue Бесконечная прокрутка

Методы слайдера

Методы — это функции, которые могут совершить со слайдером какое-то действие или сообщить о его текущем состоянии. Метод можно вызывать в любом обработчике javascript, например, при нажатии на кнопку.

slickCurrentSlide — возвращает номер текущего слайда. Отсчёт ведётся с нуля.

$('.single-item').slick('slickCurrentSlide');

slickGoTo — прокручивает на слайд с указанным номером.

$('.single-item').slick('slickGoTo',4);

slickNext — прокручивает на один слайд вперёд.

$('.single-item').slick('slickNext');

slickPrev — прокручивает на один слайд назад.

slickPause — останавливает автоматическую прокрутку.

slickPrev — запускает автоматическую прокрутку.

Посмотрите похожее — 6
Комментарии — 58
  1. avatar Николай 12 августа 2015, 13:16 #
    Когда планируется закончить перевод? И хотелось бы еще примеры с пояснениями.
    1. avatar Simkin Andrew 12 августа 2015, 13:53 #
      Точно не знаю, на выходных возможно добавлю больше примеров. А так можно брать всё из англоязычного источника.
      1. avatar Владимир 29 сентября 2016, 15:50 #
        И в чем смысл переводить? Ожидалось изменение дизайна слайдера
        1. avatar Simkin Andrew 29 сентября 2016, 20:21 #
          Дизайн слайдера каждый подстраивает под свой сайт, всем не угодишь.
    2. avatar Marta 01 декабря 2015, 17:12 #
      А как можно сделать что бы можно было копировать текст со слайдов?
      1. avatar Simkin Andrew 01 декабря 2015, 17:44 #
        отключить возможность перелистывания слайдера мышью, то есть параметр draggable установить в false
      2. avatar Raketa 11 декабря 2015, 12:36 #
        Как сделать вертикальным?
        1. avatar Simkin Andrew 11 декабря 2015, 12:39 #
          vertical:true
        2. avatar html 16 декабря 2015, 14:25 #
          как добавить еще дополнительные 2 кнопки?
          1. avatar html 16 декабря 2015, 14:26 #
            как добавить еще дополнительные 2 кнопки вперед назад?
            1. avatar Simkin Andrew 16 декабря 2015, 15:27 #
              Верстаешь кнопки, создаёшь для них jquery обработчики для листания
            2. avatar html 16 декабря 2015, 15:34 #
              а можно по подробней пример скинуть кода? я в JQuery не очень
              1. avatar Simkin Andrew 16 декабря 2015, 16:03 #
                Подробно некогда объяснять, как-то так:
                $('.btn-next').on('click',function(){ $('#slick').slick('slickNext'); });
                $('.btn-prev').on('click',function(){ $('#slick').slick('slickPrev'); });
              2. avatar html 16 декабря 2015, 17:26 #
                спасибо :)
                1. avatar Virtas 18 января 2016, 13:12 #
                  Скажите а как вместо навигации (кнопок) сделать текст (ссылки) например Блок1 Блок2 Блок3 итд
                  1. avatar Simkin Andrew 18 января 2016, 14:33 #
                    Убирай точки, верстай под слайдером ссылки и вешай на них jQuery обработчики onClick. При нажатии на ссылку чтобы выполнялся код перехода к нужному слайду. За переход к нужному слайду в slick отвечает метод slickGoTo. Типа перейти к определенному слайду:
                    $('.your-element').slickGoTo(5);
                  2. avatar Smoky 26 февраля 2016, 01:41 #
                    Подскажите, пожалуйста, есть ли в данном плагине возможно прокручивать слайды в случайном порядке + 1й слайд также всегда выводит рандомный?
                    1. avatar Simkin Andrew 26 февраля 2016, 09:25 #
                      Кажется нет, для этого надо самому при помощи php скрипта или ещё каких-то инструментов перемешивать слайды и затем их выводить.
                    2. avatar Рита 11 марта 2016, 00:12 #
                      Здравствуйте! А как при клике с первого на третий слайд не показывать второй? Если используется обычная анимация ( не fade)
                      1. avatar Simkin Andrew 11 марта 2016, 10:03 #
                        Не понял как это. Удали просто второй слайд, если его показ не нужен.
                        1. avatar Рита 11 марта 2016, 10:23 #
                          Его показ нужен, работает autoplay и все слайды показываются по очереди. Но как быть если пользователь принудительно нажимая на дотс переключает с первого сразу на третий. Как в этом случае пропускать второй?
                          1. avatar Simkin Andrew 13 марта 2016, 18:28 #
                            Я понял, не вижу таких возможностей. Если только писать какие-то свои jquery обработчики для нажания на дотс.
                            1. avatar Рита 14 марта 2016, 12:22 #
                              нашла выход — SwiperJS
                              1. avatar Simkin Andrew 14 марта 2016, 13:10 #
                                Ну да, как вариант — использовать другой слайдер.
                      2. avatar Viktor 24 марта 2016, 15:29 #
                        Добрый день, если слайдер находиться в табе который изначально скрыт. Как дописать событие что бы при клике на вкладку таба слайдер пере инициализировался. Сейчас когда клацаешь на таб слайдер валиться. Заранее спасибо! Если можно какой нибудь пример при клике как инициализировать его заного.
                        1. avatar Simkin Andrew 24 марта 2016, 16:32 #
                          У него нет переинициализации. Как вариант, при клике можно просто ещё раз выполнить его код. Но вообще, раз он валится, значит дочернему скрытому полю не задана фиксированая ширина. Что-то с вёрсткой.
                        2. avatar Юрий 31 марта 2016, 21:53 #
                          не нашел, можно ли не прокручивать слайдер по кругу? и будут ли при этом кнопки доходя до начала\конца дизейблится?
                          1. avatar Simkin Andrew 31 марта 2016, 22:00(был изменён) #
                            Параметр infinite: false, кнопки просто не будут дальше прокручивать.
                          2. avatar Михалыч Пихалыч 31 мая 2016, 12:13 #
                            Всем привет! делаю все как по инструкции а слайдер не запускается, только дивы выводятся с 1 до 6, пишет что не удалось загрузить jquery 1.11.1
                            1. avatar Simkin Andrew 31 мая 2016, 13:40 #
                              Значит Вы пытаетесь его загрузить от туда, где его нет. Используйте код из примера, я проверил, по предоставленной ссылке корректно грузится jquery-1.11.0.min.js
                            2. avatar Роман 15 июня 2016, 16:41 #
                              Привет! Подскажите пожалуйста. Есть такой слайдер http://joxi.ru/l2ZNglxS81Ydq2
                              Большой слайдер с 1й картинкой вверху и ниже маленький слайдер с 5ю картинками и ниже dots с привязкой к нижнему слайдеру. При клике на нижнем слайдере на слайд, у нас на верхнем слайдере выводится эта картинка в большом разрешении, dots(кружочек ниже) становится белым, т.к. стал активным другой слайд. При листании стрелочками большого слайдера, в нижнем слайдере меняется белая окантовка(активный слайд) и dots(белый кружочек)
                              Заранее спасибо!
                              1. avatar Simkin Andrew 15 июня 2016, 17:12 #
                                Я не понял — что не так. Судя по описанию все работает логично. В чём проблема?
                                1. avatar Роман 15 июня 2016, 17:17 #
                                  забыл сам вопрос задать)) как мне всё это друг с другом связать? если б был вверху слайдер и просто внизу, проблем бы небыло. А так ещё эти кружочки и активный слайй…
                                  1. avatar Simkin Andrew 15 июня 2016, 17:24 #
                                    Есть такой параметр у slick — asNavFor, с помощью него можно связать два слайдера. В этом параметре указывается идентификатор другого слайдера, то есть при вызове slick у обоих слайдеров добавить asNavFor: '.slider-2' и asNavFor: '.slider-1'.
                                    1. avatar Роман 15 июня 2016, 17:34(был изменён) #
                                      Это да… а как быть с кружочками? Что б на каждый слайд был свой кружочек? И что б у активного слайда была обводка?
                                      1. avatar Simkin Andrew 15 июня 2016, 17:40 #
                                        Не знаю если честно, это надо смотреть, можно ли стилями оформить, если нет, возможно, самому придется на js что-то дописывать.
                                        1. avatar Роман 15 июня 2016, 17:43 #
                                          а вот ты писал, что есть такой метод
                                          $('.your-element').slickGoTo(5);
                                          Если его применить на кружочки сверстанные и на нижний слайдер. Только я не понял как этот скрипт применить. Подскажешь?
                                          1. avatar Simkin Andrew 16 июня 2016, 09:47 #
                                            Это метод, который позволяет перейти к определённому слайду. Нужно, повесить обработчик на событие setPosition обоих слайдеров и в них использовать метод slickCurrentSlide чтобы узнать ID слайда текущего слайдера и присвоить его второму слайдеру через slickGoTo. Скрипт не напишу, так как это надо всё пробовать на боевом примере, нет на это времени.
                                            1. avatar Роман 16 июня 2016, 12:37 #
                                              спасибо, я уже написал)
                              2. avatar Василий 16 июня 2016, 12:52 #
                                Можно как то сверстать dots в слик слайдере? Стрелки влево\вправо верстал, а dots как не подскажете?
                                http://joxi.ru/DmBNMzZSNDoL8m
                                1. avatar Simkin Andrew 17 июня 2016, 13:48 #
                                  Стили все можно редактировать. Если нужно для каждой точки свой стиль, то можно через CSS псевдокласс nth-child() это сделать. Может и другие способы есть, не знаю.
                                2. avatar Артем 17 июня 2016, 11:22 #
                                  Можно ли отключить зацикливание но при это сохранить автопрокрутку? когда делаю infinite:false и autoplay:true то зацикливание все равно остается. можно ли как то это решить?
                                  1. avatar Simkin Andrew 17 июня 2016, 13:45 #
                                    Автопрокрутка будет, но до последнего слайда, затем остановится. Сделать можно, но придётся писать свой js код, смотри событие beforeChange.
                                  2. avatar Женя 20 июня 2016, 17:19 #
                                    Как исправить дёргание в slickslider? Есть проект arcticdog.ru, чуть ниже есть вертикальный слайдер joxi.ru/52akLvBSG56Vkr. При перелистывании слайда, нас автоматически тянет вверх экрана или вниз. Не знаешь как это можно исправить?
                                    1. avatar Simkin Andrew 21 июня 2016, 20:41 #
                                      Не знаю. Найдёшь как, отпиши… может кому пригодится решение.
                                      1. avatar Женя 23 июня 2016, 13:21 #
                                        accessibility: false
                                        1. avatar Simkin Andrew 23 июня 2016, 14:32 #
                                          Точно. Спс.
                                    2. avatar Алексей 13 июля 2016, 21:43 #
                                      Подскажите, пожалуйста. А можно сделать так, чтобы слайды шли не по кругу, а туда сюда?
                                      1. avatar Simkin Andrew 16 июля 2016, 17:12 #
                                        кажется, нет такой возможности
                                      2. avatar макс 27 июля 2016, 12:57 #
                                        Здравствуйте, подскажите пожалуйста, я сделал слайдер вертикальным, как можно сделать, чтобы слайды выезжали только сверху.Или при нажатии вниз они выезжали сверху, а при нажатии вверх, они выезжали снизу?
                                        1. avatar Simkin Andrew 27 июля 2016, 19:54 #
                                          наверно, параметр vertical:true, других вариантов не знаю
                                        2. avatar Роман 29 июля 2016, 15:20 #
                                          Привет. Подскажите есть вариант сделать различные эфекты перехода между слайдами? Кроме стандартного и fade?
                                          1. avatar Наталья 04 октября 2016, 13:25 #
                                            Привет! Подскажите пожалуйста, как изменить кнопки (вперед/назад) при окончании слайдера? т.е. у каждой кнопки есть 2 картинки (активная красная и неактивная-серая) как при дохождении до последнего слайда кнопку поменять с активной на неактивную?
                                            1. avatar Simkin Andrew 04 октября 2016, 14:53 #
                                              Привет… настройка infinite: false запрещает циклическое прокручивание. Если кнопки стандратные, то они автоматически станут неактивными и некликабельными. Если нестандартные, то можно переоформить с помощью стилей. При крайних положениях соответствющим кнопкам добавляется класс slick-disabled.
                                            2. avatar Андрей 10 октября 2016, 18:28 #
                                              добрый день!
                                              имеется слайдер, сделал его вертикальным через vertical:true, подскажите пожалуйста, можно ли как-то динамически изменять это значение на false?

                                              а то в моб версии он снова горизонтальный, спасибо
                                              1. avatar Simkin Andrew 10 октября 2016, 20:04 #
                                                Динамически изменять нельзя. И не понятно, как в мобильной версии он мог стать горизонтальным. Эта настройка не зависит от расширения экрана. Может с вёрсткой что-то не так.
                                              2. avatar Ирина 03 ноября 2016, 11:34 #
                                                Добрый день, подскажите пожалуйста, как в слайдере сделать динамическое добавление слайдов. вот как на этом сайте в галерее:http://simonna-wedding.com.ua/portfolio-container «Счастье, которое мы подарили». На десктопе в одном слайде 2 колонки-правая с большой фото, левая — с двумя маленькими. На планшете левая колонка (с маленькими фото) как-то становится отдельным слайдом. А на мобильных — вообще каждая фото — это отдельный слайд.
                                                1. avatar Simkin Andrew 03 ноября 2016, 11:58 #
                                                  Добрый… это к настройкам слайдера не относится. Для этого необходима адаптивная вёрстка содержимого слайдов. То есть Вам для решения этой задачи нужно искать верстальщика.
                                                © REALADMIN.RU   2016 г.
                                                Страница сгенерирована: 0,1223 s | 10 mb.
                                                На каком уровне Вы играете в шахматы?
                                                О П Р О С
                                                Home Question Top