RealAdmin.ru

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

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

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

Скачать Slick slider 1.8.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

Несколько слайдов

В примере выводим 3 слайда с параметрами зацикленной прокрутки (infinite), отображением навигационных точек (dots) и количеством прокручиваемых слайдов за раз.

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

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

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

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

Настройка 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'

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

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

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

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

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

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

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

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

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

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

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

События Slick слайдера

На некоторые события слайдера можно устанавливать свои обработчики. Например, после прокрутки к 5 слайду мы должны сделать какое-то действие. Для этого включаем обработчик события «afterChange».

$('#slick-slider').on('afterChange', function(event, slick, currentSlide){
  if (currentSlide == 5) { console.log('Осуществлён переход к 5му слайду'); }
});

Если действие следует совершить перед осуществлением перехода, то задействуем событие «beforeChange».

$('#slick-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log('Собираемся осуществить переход к '+nextSlide+' слайду');
});
Посмотрите похожее — 6
Комментарии —
  1. avatar Mila 24 мая 2018, 12:15(был изменён) #
    Здравствуйте! У меня такая большая проблема. Мне нужно сделать слайдер, чтобы видны были 3 слайда, центральный был впереди, правый был ниже на 113px, и левее центрального (чтобы центральный был впереди, а боковые ниже центрального, выглядывали из-за него). Дедлайн сегодня вечером. Начала делать с помощью slick-slider, с помощью класса center, потому что с JS на «Вы». Задала каждому слайду класс user-slide, сделала для slide-clone margin-top, отрицательный margin-right. При прокрутке центральный слайд (center) не реагирует на z-index:9999, и когда он становится slide-clone, он не опускается вниз, а стоит на том же уровне. Как задать margin-top и отрицательный right тому, который перед центральным, вообще не понимаю. У него те же классы, что и у центрального. Еще, почему-то, стрелочки при нажатии не активны, но с этим, может, успею разобраться (наверно, какой-то блок на них находит).
    /*Slider*/
    .slider {
    	padding-top: 120px;
    	padding-left: 130px;
    }
    .user_slide {
    	margin-left: -50px;
    	overflow: hidden;
    	border-radius: 10px;
    	background: transparent;
    }
    .arrows-slider {
    	position: absolute;
    	width: 20px;
    	height: 20px;
    }
    .slider-prew {
    	top: 10%;
    	left: 680px;
    }
    .slider-next {
    	top: 10%;
    	left: 750px;
    }
    .arrows-slider {
    	position: absolute;
    }
    .slick-cloned {
    	margin-right: -150px;
    	margin-top: 60px;
    }
    .slik-center {
    	z-index: 9999;
    }
    1. avatar Simkin Andrew 24 мая 2018, 12:49 #
      Добрый день. Задача нестандартная, поэтому здесь вряд кто-то поможет.
      По идее, надо предыдущему слайду какой-то класс на JS присваивать и уже к этому классу на CSS привязывать нужные стили. Класс привязать можно как-то так:

      $('#slick-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
        $('#slick-slider .slick-slide').removeClass('prev-slide');
        $('#slick-slider .slick-current').addClass('prev-slide');
      });
      Но это всё примерно.
      1. avatar Mila 24 мая 2018, 12:51 #
        Спасибо большое! Сейчас попробую.
    2. avatar Leo 16 мая 2018, 17:45 #
      Скажите пожалуйста. могу ли я реализовать такую задумку если да, то как?
      слайдер, например из 10 div.slider-elem, показывать на странице три из них (по дефолту все три будут иметь класс slick-active), НО что бы из показанных трех slick-active был только одни! я хочу одному из показанных слайдов сделать другие стили, но по дефолту все отображенные на странице div имеют класс slide-active
      Хочу что бы была карусель из 10 элементов, показывало на странице три, и активный был только один, например активный сделать Крупным
      1. avatar Андрей 01 мая 2018, 16:36 #
        Здравствуйте! Как сделать, чтобы показ слайдов начинался с произвольного номера (например, с 5-го)?
        1. avatar Simkin Andrew 03 мая 2018, 10:59 #
          При вызове слайдера указать initialSlide=5
          1. avatar Андрей 03 мая 2018, 13:41 #
            Спасибо!
          2. avatar Руслан 10 мая 2018, 13:24 #
            var rand = Math.floor(Math.random() * 10);
            а в вызове слайдера добавить:
            'initialSlide': rand
            Рандомной выпадает каждый раз разный слайд
            1. avatar Андрей 11 мая 2018, 00:38 #
              Спасибо огромное!
          3. avatar Олег 17 апреля 2018, 17:47(был изменён) #
            Добрый день! Возможно ли настроить слайд таким образом, чтобы для первого слайда центрирование не срабатывало, а при переходе на второй слайд включалось? Что-то типа такого, возможно
            $('.js_gallery-detail-slider-var3').on('afterChange', function (event, slick, currentSlide) {
                if (currentSlide == 1) {
                    $('.js_gallery-detail-slider-var3').slick({centerMode: false});
                }
                else if (currentSlide == 2) {
                    $('.js_gallery-detail-slider-var3').slick({centerMode: true});
                }
            });
            Заранее спасибо
            1. avatar Simkin Andrew 17 апреля 2018, 21:19(был изменён) #
              Почти, только выключать так:
              $('.js_gallery-detail-slider-var3').slick("slickSetOption", "centerPadding", "0", true); 
              $('.js_gallery-detail-slider-var3').slick("slickSetOption", "centerMode", false, true);
              а включать так:
              $('.js_gallery-detail-slider-var3').slick("slickSetOption", "centerMode", true, true);
            2. avatar Пирожок 13 апреля 2018, 13:59 #
              Добрый день. При добавлении сюда autoplay — в CMS Битрикс все работает. Если отрывать без администрирования и в других браузерах — autoplay не работает. В чем может быть причина?

              $('.top_slider<?=$uniquePart;?>').slick({
                      slidesToShow: 1,
                      slidesToScroll: 1,
                      autoplay: true,
                      autoplaySpeed: 900,
                      arrows: true,
                      fade: true
              });
                      
              1. avatar Simkin Andrew 13 апреля 2018, 21:04 #
                Не могу сказать, ошибки надо смотреть в консоли браузера.
              2. avatar Евгений 22 марта 2018, 00:12 #
                Здравствуйте, может вы поможете. Установил, настроил вроде все отлично, но при уменьшении масштаба браузера картинка тоже уменьшается и съезжает в левую сторону, на маленьких экранах все ок а на больших картинка с левой стороны.
                1. avatar Simkin Andrew 22 марта 2018, 09:47 #
                  Надо чтоб верстальщик посмотрел и поправил, что-то с CSS стилями не так.
                2. avatar Алекс 16 марта 2018, 21:54 #
                  Доброго времени суток! Столкнулся с такой проблемой, на мобильном при листании страницы, дойдя да карусели происходит остановка, т.е. дальше страницу прокрутить не могу ерзая пальцем по экрану в области карусели. Карусель листается вправо-влево, а страница вверх-вниз не двигается. Кто сталкивался, подскажите как победить?
                  1. avatar Simkin Andrew 16 марта 2018, 23:36 #
                    Пропиши параметр в вызове слайдера:
                    accessibility: false
                    1. avatar Алекс 17 марта 2018, 06:44 #
                      Не помогает. Да я думаю навигация клавишами и не при чем тут. Есть еще варианты?
                      1. avatar Simkin Andrew 17 марта 2018, 10:27 #
                        Ниже в комментариях писали про такой случай, говорили что помогает. Ещё вариант обновить скрипт slick до последней версии, 1.8 кажется. И проверить корректность вёрстки. Больше ничего предложить не могу.
                        1. avatar Алекс 17 марта 2018, 12:43 #
                          Спасибо! Проблема решилась после обновления до версии 1.8. Кстати, работает независимо от параметра accessibility.
                  2. avatar Елена 16 марта 2018, 14:28 #
                    Спасибо за предыдущий ответ! еще такой вопрос: есть слайдер, листающий по 1 картинке с прозрачным фоном. Если нажать на картинку слайдера, то появляется обводка… как ее убрать? Заранее спасибо!
                    1. avatar Елена 17 марта 2018, 03:37(был изменён) #
                      вопрос снят. разобралась.
                      .slick-slide:focus {outline: none;}
                      1. avatar Simkin Andrew 17 марта 2018, 10:25 #
                        Да, именно так. Забыл ответить.
                    2. avatar Елена 14 марта 2018, 22:34 #
                      Доброго вечера! не подскажете, можно ли настроить «dots» на свой вкус?
                      1. avatar Simkin Andrew 15 марта 2018, 15:07(был изменён) #
                        Добрый день. Можно, оформление с помощью CSS стилей. Прописано в файле slick-theme.css Селектор начинается с .slick-dots li button
                      2. avatar Руслан 14 марта 2018, 16:17 #
                        Использую ваш слайдер как слайдер для отзывов, все отлично, супер, но ломаю голову, один отзыв у меня занимает 3 строчки а другой отзыв 12 строчек, как сделать так что бы слайдер реагировал на высоту контейнера и высота блока менялась в зависимости от наполения в одном слайде, затуркался никак не могу увидеть :(
                        1. avatar Simkin Andrew 14 марта 2018, 19:35 #
                          Проще всего прописать всем слайдам с помощью CSS стилей min-height. Установить минимальную высоту равной высоте самого высокого слайда.
                          Либо, писать скрипт на js, который сам будет определять макс. высоту слайдов и устанавливать её для всех слайдов. Но скрипт я не помогу написать — лень.
                          1. avatar Simkin Andrew 14 марта 2018, 19:37 #
                            Да, вот так типа:
                            <style>.slick-slide {min-height: 200px;}</style>
                            1. avatar Константин 05 апреля 2018, 14:08 #
                              У слайдера для этого есть специальный параметр
                              adaptiveHeight: true
                              1. avatar Руслан 06 апреля 2018, 10:20 #
                                Ты просто мой спаситель) благодарочка)))
                            2. avatar al. 09 марта 2018, 17:26 #
                              всем привет! Помогите решить проблему. При нажатии на слайд обводится синим, как убрать?
                              1. avatar zaramar 09 марта 2018, 21:21 #
                                .класс слайдов{
                                outline:none;
                                }
                                
                              2. avatar zaramar 09 марта 2018, 13:32 #
                                Доброго времени суток, у меня такая проблема:
                                Заменил стандартные кнопки прокрутки на свои, но они стали не по бокам слайдера а поверх него и под ним, как можно изменять расположение этих самых кнопок?
                                1. avatar fortsev 26 марта 2018, 16:03 #
                                  Можно, меняя стили классов .slick-next и .slick-prev
                                2. avatar Антон 07 марта 2018, 22:10 #
                                  Доброго всем! Подскажите, если есть 2 связанных слайдера (большой с 1 картинкой и маленький на 6 картинок). хотелось бы:
                                  1) затемнить те слайды, которые неактивны
                                  2) активный слайд большого слайдера соответствовал бы 2 или 3ему слайду маленького. (centerMode — оставляет «обрезанные» кадры по бокам, что не желательно.)
                                  Премного благодарен за любой совет и помощь!
                                  1. avatar Simkin Andrew 08 марта 2018, 12:25 #
                                    Для затенения попробуй стилями прописать фон полупрозрачный тёмный для всех слайдеров, кроме активного:
                                    slider .slick-slide {
                                        background-color: rgba(0,0,0,.2) !important;
                                    }
                                    
                                    slider .slick-active {
                                        background-color: none !important;
                                    }
                                    Или можно с прозрачностью слайдов поиграться.

                                    А по 2му пункту ничего не могу сказать, не понял как это. Наверно, нельзя сделать.
                                    1. avatar Антон 08 марта 2018, 12:29 #
                                      благодарю! интересно, а без !important можно как-то стили слайдера перебить? уж очень не любят у нас, когда используют это свойство((
                                      1. avatar Simkin Andrew 08 марта 2018, 19:01 #
                                        Да можно и без этого — тогда стили просто править в файле slick-theme.css Там прописано всё оформление для слайдера.
                                        1. avatar Антон 09 марта 2018, 01:51 #
                                          спасибо! ушел экспериментировать!
                                  2. avatar Тимур 06 марта 2018, 14:46 #
                                    Что за касперы тут летают? О_О
                                    1. avatar Simkin Andrew 08 марта 2018, 12:14 #
                                      Завелось одно :)
                                      1. avatar Антон 08 марта 2018, 12:29 #
                                        а как оно вызывается?)
                                        1. avatar Simkin Andrew 08 марта 2018, 19:03 #
                                          Само прилетает иногда, когда захочет))
                                          1. avatar Антон 09 марта 2018, 01:51 #
                                            хм… интересно на какие «плюшки» приманивается?) уж больно симпатичное привидение)))
                                    2. avatar Александр 23 февраля 2018, 15:03 #
                                      Подскажите, есть-ли возможность тег сделать копируемым в карусели как текст? Идет картинка, а ниже текст.
                                      <div class="your-class">
                                        <div class="my"><img src=1.png> <p>Слово</p></div>
                                        <div class="my"><img src=1.png> <p>Слово</p></div>
                                        <div class="my"><img src=1.png> <p>Слово</p></div>
                                      </div>
                                      1. avatar Simkin Andrew 23 февраля 2018, 15:14 #
                                        Только если отключить перелистывание слайдера свайпом
                                        draggable=false
                                      2. avatar Вячеслав 10 февраля 2018, 03:37 #
                                        Скрипт хорош! Но с новой библиотекой не работает
                                        https://code.jquery.com/jquery-3.1.1.min.js
                                        1. avatar Simkin Andrew 11 февраля 2018, 18:45 #
                                          Работает. У меня здесь jquery 3.2.1
                                          1. avatar Вячеслав 11 февраля 2018, 19:11(был изменён) #
                                            Разобрался. Отличный скрипт.
                                            Спасибо!
                                            1. avatar Вячеслав 11 февраля 2018, 19:37 #
                                              Для идеала не хватает прокрутки мышкой с помощью плагина jquery.mousewheel.js или ещё как.
                                          2. avatar Руслан 09 февраля 2018, 15:10 #
                                            Ребята подскажите плиз, как сделать что бы слайдер всегда начинался с разных картинок или тут это нельзя сделать?
                                            1. avatar Simkin Andrew 09 февраля 2018, 16:29(был изменён) #
                                              Есть такой параметр как initialSlide — номер слайда с которого начинать показ. Можно в неё присваивать случайное число, допустим, от 0 до 10:
                                              var rand = Math.floor(Math.random() * 10);
                                              а в вызове слайдера добавить: 
                                              'initialSlide' : rand
                                            2. avatar Игорь 01 февраля 2018, 20:21 #
                                              Здравствуйте, подскажите как сделать некоторые фотографии вертикальными? то есть в любом стандартном редакторе комп сам поворачивает фотографии, если они сфотографированы вертикально. Добавил слайдер и все фотки и горизонтальные и вертикальные стали горизонтальными.
                                              1. avatar Simkin Andrew 02 февраля 2018, 11:54 #
                                                Добрый день. Для слайдера надо заранее подготовить фото, желательно одного размера и одной ориентации. Сам слайдер ориентацию фоток не исправит.
                                                1. avatar Игорь 03 февраля 2018, 12:09 #
                                                  Всё спасибо разобрался. думал если в редакторе фотка сама поворачивается, то значит она вертикальная, а на самом деле они все у меня горизонтальные и редактор сам как-то определяет какие поворачивать)
                                              2. avatar Александр 07 ноября 2017, 16:39 #
                                                Не подскажете:
                                                Скачал шаблон, в нем это слайдер. разобрался, что за слайдер отвечает скрипт slick.min.js. Не могу понять как сделать больше паузы между слайдами, уже меня разные значения.
                                                1. avatar Simkin Andrew 08 ноября 2017, 17:03 #
                                                  Скорость автопрокрутки задается параметром autoplaySpeed в коде инициализации слайдера. А уж где этот код в шаблоне — это надо искать. Если этого параметра там нет, то используется значение по умолчанию — 3 секунды.
                                                2. avatar Павел 26 сентября 2017, 17:38(был изменён) #
                                                  Спасибо вам огромное за перевод!!!
                                                  1. avatar Вика 09 сентября 2017, 18:38 #
                                                    Здравствуйте.
                                                    Подскажите а можно сделать полосу прокрутки у слик слайдера вместо навигационных точек??
                                                    Очень надо!!!
                                                    1. avatar Simkin Andrew 09 сентября 2017, 20:38 #
                                                      из коробки такого функционала нет. Программист на javascript наверно сможет придумать как сделать.
                                                      1. avatar Alex_SVG 13 октября 2017, 16:29 #
                                                        можно допилить самому это не проблема.
                                                      2. avatar Кузя 22 июня 2017, 14:21 #
                                                        Здравствуйте. у меня вопрос: только начал изучать slick и не понял если в центрированном виде нужна карусель в html что надо а в js как я понял нужно вставлять с самого сайта slick (demos=>centredmode) помогите разобраться пж
                                                        1. avatar Simkin Andrew 22 июня 2017, 22:46 #
                                                          В html все как в примерах. Ничего дополнительного не требуется.
                                                        2. avatar Aidai 21 июня 2017, 13:03 #
                                                          подскажите пожалуйста есть ли возможность сделать так, чтобы слайдер начинал прокрутку только при наведении на него мышью? если нет, то какое событие и действие необходимо переопределить? спасибо!
                                                          1. avatar Simkin Andrew 21 июня 2017, 21:02 #
                                                            из коробки такой возможности, вроде нет. Наверно, надо использовать события mouseover и mouseout чтобы отслеживать приход и уход курсора на слайдер. И автоматом включать или отключать его автопрокрутку —
                                                            $('.mainSlider').slickPlay();
                                                            $('.mainSlider').slickPause();
                                                          2. avatar Макс 20 мая 2017, 01:31 #
                                                            Возможно ли у данного слайдера отключить автоматический выбор слайдера при перелистывании?
                                                            А сделать так, чтобы только по нажатию мышки он активировался?

                                                            $('.slider-for').slick({
                                                                        slidesToShow: 1,
                                                                        slidesToScroll: 1,
                                                                        arrows: false,
                                                                        fade: false,
                                                                        asNavFor: '.slider-nav'
                                                                    });
                                                                    $('.slider-nav').slick({
                                                                        slidesToShow: 5,
                                                                        slidesToScroll: 1,
                                                                        asNavFor: '.slider-for',
                                                                        dots: false,
                                                                        centerMode: true,
                                                                        focusOnSelect: true,
                                                                        easing: true
                                                            
                                                                    });
                                                            1. avatar Simkin Andrew 20 мая 2017, 11:02 #
                                                              Как-нибудь можно. Наверно, надо ставить focusOnSelect=false, и писать отдельный обработчик для активации при нажатии на кнопки перелистывания. Хотя может и проще как-то можно. Не сталкивался.
                                                            2. avatar Владимир 08 мая 2017, 23:10 #
                                                              Помогите пожалуйста! Нужно в slick слайдере сделать фиксированную ширину слайдов-1170px на больших разрешениях(более 1200px) при этом активный(текущий) слайд должен быть всегда по центру а остальные слайды должны быть видны в зависимости от разрешения(чем больше разрешение тем больше влазит по бокам остальных слайдов) Очень нужно)
                                                              1. avatar Simkin Andrew 09 мая 2017, 14:45 #
                                                                Адаптивная вёрстка слайдера по ТЗ — это на фриланс площадки.
                                                              2. avatar Богдан 01 мая 2017, 21:30 #
                                                                Всем привет! Такой вопрос: как убрать возможность кликать пока фотка не пролисталась?
                                                                1. avatar Александр 28 апреля 2017, 18:25 #
                                                                  Добрый день.
                                                                  Подскажите в чем проблема, я подключил в слайдере свойство draggable: false, т.е. отключил прокручивание картинок с помощью мышки и оставил прокрутку с помощью кнопок. На компьютере свойство работает, но на мобильном устройстве НЕТ. Как отключить прокручивание картинок пальцем, оставить только кнопки?
                                                                  Спасибо.
                                                                  1. avatar Simkin Andrew 29 апреля 2017, 08:25 #
                                                                    draggable относится только к мышки. Чтобы отключить прокручивание пальцем используй свойство swipeToSlide:false
                                                                  2. avatar Антон 18 апреля 2017, 11:36 #
                                                                    При старте страницы слайдер немного тупит и слайды не прячуться, а налазят друг на друга
                                                                    1. avatar Simkin Andrew 18 апреля 2017, 13:44 #
                                                                      Это следует решать только с помощью CSS, в каждом случае индивидуально. Слайдер не может мгновенно начать работать, но можно попробовать ускорить этот процесс, перенести код в самое начало страницы. Оптимизировать css стили, чтобы даже тогда когда слайдер ещё не начал работать, ничего не ехало. В общем, это всё индивидуально.
                                                                    2. avatar Rulle 03 апреля 2017, 13:52 #
                                                                      Здравствуйте!
                                                                      На сайте стоит слайдер на автоплее. Где-то в середине страницы.
                                                                      Если не «трогать» его, не кликать, не пролистывать мышкой, то ведет себя нормально, но если же сделать какую-либо манипуляцию с ним, пролистать, кликнуть по одному из баннеров, то становится невозможно прокручивать страницу и просматривать её иные фрагменты. Вернее, страница, содержащая слайдер, всегда возвращается к слайдеру, размещая его по середине. То есть я прокручиваю страницу вверх — она сама прокручивается на слайдер. То же самое вниз — прокрутил вниз, страница сама вернулась на слайдер.
                                                                      В чем может быть проблема?
                                                                      Спасибо.
                                                                      1. avatar Rulle 03 апреля 2017, 14:00 #
                                                                        Выше ответил Женя.
                                                                        accessibility: false
                                                                        Спасибо!
                                                                      2. avatar Игорь 14 февраля 2017, 23:19 #
                                                                        Здравствуйте, не подскажите как сделать чтобы при уменьшении окна браузера размер фоток в карусели не сжимался по горизонтали и не превращался в сплющенные фото как здесь http://dialtour.ru/assets/libs/lightbox2-master/examples/slick-1.6.0/index1.html
                                                                        а вел себя как здесь: фото сходятся, но остаются в первоначальном размере. В конце начинают изменять ширину окна, но без искажения самих пропорций фотографий https://tezeks.com/avstriya/vena/peshehodnaya-ekskursiya-po-vene
                                                                        1. avatar Simkin Andrew 15 февраля 2017, 09:36(был изменён) #
                                                                          Видимо какие-то скрипты навешаны, точно не скажу. При изменении размера окна всё сильно тормозит. Обычно адаптивность в slick делают через параметр breakpoint, где можно уменьшать кол-во выводимых слайдов при конкретном разрешении. Тут про это писали — http://realadmin.ru/saytostroy/slick-slider.html#comment-1175
                                                                          1. avatar Игорь 15 февраля 2017, 19:43 #
                                                                            спасибо. Ещё такой вопрос. Как скрыть стрелки в случае если прокрутки слайдов дальше нет?
                                                                            вот пример как стрелки скрываются https://tezeks.com/chehia/praga/ekskursija-v-drezden

                                                                            вот у меня не скрываются http://dialtour.ru/assets/libs/lightbox2-master/examples/slick-1.6.0/index1.html
                                                                            1. avatar Simkin Andrew 15 февраля 2017, 20:41 #
                                                                              Стили CSS пропиши: .slick-arrow.slick-disabled { display: none; }
                                                                        2. avatar Мария 01 февраля 2017, 00:47 #
                                                                          Здравствуйте.
                                                                          Не подскажите, можно ли сделать так, чтоб при нажатии на кнопки (стрелки) проматывался 1 слайд, а во время автопрокрутки — 2 слайда?
                                                                          1. avatar Simkin Andrew 01 февраля 2017, 21:38 #
                                                                            Просто настройками вроде нельзя. Только писать свои обработчики на нажатие кнопок на jquery. Типа:
                                                                            $('#slick-slider .slick-next').on('click',function(e){
                                                                            	e.preventDefault();
                                                                            	$('#slick-slider').slick('slickNext');
                                                                            	return;
                                                                            });
                                                                            Но не испытывал, может где-то ошибка.
                                                                          2. avatar Вячеслав 20 января 2017, 17:07 #
                                                                            Добрый день. Подскажите плиз, если я ставлю slidesToShow: 4, slidesToScroll: 1 и при этом у меня количество слайдов меньше 4, то клонирования не происходит. Так бывает если например у меня блок просмотренных товаров повешен на слайдер, а пользователь просмотрел 1, 2 товара. Пусть они даже не будут клонироваться, но как сделать чтоб они центрировались? Спасибо!
                                                                            1. avatar Simkin Andrew 22 января 2017, 22:00 #
                                                                              Ну я думаю, уже что-то придумал сам. У меня при таких параметрах слайдер вообще не листается. Ну а центрировать можно параметром: centerMode: true
                                                                            2. avatar Алиса 14 января 2017, 12:17 #
                                                                              Добрый день!
                                                                              Как сделать прокрутку «вверх» до якоря по нажатию на элемент dots? Рисую слайдер 3х3, навигация внизу, надо чтобы когда осуществлялся переход на новый слайд, срабатывало событие ScrollToTop.
                                                                              1. avatar Simkin Andrew 14 января 2017, 15:24 #
                                                                                Не понял как это, слайдер 3 на 3. Отследить переход на новый слайд можно так:
                                                                                $('#slick-slider').on('afterChange', function(event, slick, currentSlide){
                                                                                // тут переход куда-то наверх
                                                                                });
                                                                                
                                                                                как перейти именно к якорю, не знаю. Нужно что-то придумывать.
                                                                                1. avatar Алиса 14 января 2017, 19:31 #
                                                                                  Спасибо, с этим разобралась. Есть ещё одна проблема:
                                                                                  Подскажите почему не срабатывают вкладки jsfiddle.net/xv1ogzkt при переключении? Если row 1, то норм, если больше начинает падать.
                                                                                  1. avatar Simkin Andrew 16 января 2017, 10:11 #
                                                                                    Не смогу подсказать. Возможно, несовместимы параметры.
                                                                              2. avatar Zergiuz 19 декабря 2016, 11:22 #
                                                                                День добрый! Подскажите пожалуйста как создать два слайдера на одной странице?
                                                                                Ну я понимаю что в JS все «объект», а как создать второй слайдер не пойму(
                                                                                Заранее спасибо!
                                                                                1. avatar Simkin Andrew 19 декабря 2016, 12:02 #
                                                                                  Добрый день. Создаёте на странице разметку для двух слайдеров, указываете им только разные классы и в js коде два раза для каждого прописываете инициализацию слайдера:
                                                                                  $('.slider-one').slick();
                                                                                  $('.slider-two').slick();
                                                                                  
                                                                                  В скобках для каждого слайдера уже можно указывать свои индивидуальные параметры.
                                                                                2. avatar Ирина 03 ноября 2016, 11:34 #
                                                                                  Добрый день, подскажите пожалуйста, как в слайдере сделать динамическое добавление слайдов. вот как на этом сайте в галерее:http://simonna-wedding.com.ua/portfolio-container «Счастье, которое мы подарили». На десктопе в одном слайде 2 колонки-правая с большой фото, левая — с двумя маленькими. На планшете левая колонка (с маленькими фото) как-то становится отдельным слайдом. А на мобильных — вообще каждая фото — это отдельный слайд.
                                                                                  1. avatar Simkin Andrew 03 ноября 2016, 11:58 #
                                                                                    Добрый… это к настройкам слайдера не относится. Для этого необходима адаптивная вёрстка содержимого слайдов. То есть Вам для решения этой задачи нужно искать верстальщика.
                                                                                  2. avatar Андрей 10 октября 2016, 18:28 #
                                                                                    добрый день!
                                                                                    имеется слайдер, сделал его вертикальным через vertical:true, подскажите пожалуйста, можно ли как-то динамически изменять это значение на false?

                                                                                    а то в моб версии он снова горизонтальный, спасибо
                                                                                    1. avatar Simkin Andrew 10 октября 2016, 20:04 #
                                                                                      Динамически изменять нельзя. И не понятно, как в мобильной версии он мог стать горизонтальным. Эта настройка не зависит от расширения экрана. Может с вёрсткой что-то не так.
                                                                                      1. avatar Оксана 16 декабря 2016, 12:59(был изменён) #
                                                                                        Динамически можно изменять с помощью берэйкпоинтов
                                                                                        responsive: [
                                                                                             	{
                                                                                              		breakpoint: 900,
                                                                                              		settings: {
                                                                                                		slidesToShow: 4,
                                                                                                		vertical:true,
                                                                                              		}
                                                                                              	}
                                                                                        1. avatar Simkin Andrew 16 декабря 2016, 21:30 #
                                                                                          Точно, забыл что есть такая возможность.
                                                                                      2. avatar Наталья 04 октября 2016, 13:25 #
                                                                                        Привет! Подскажите пожалуйста, как изменить кнопки (вперед/назад) при окончании слайдера? т.е. у каждой кнопки есть 2 картинки (активная красная и неактивная-серая) как при дохождении до последнего слайда кнопку поменять с активной на неактивную?
                                                                                        1. avatar Simkin Andrew 04 октября 2016, 14:53 #
                                                                                          Привет… настройка infinite: false запрещает циклическое прокручивание. Если кнопки стандратные, то они автоматически станут неактивными и некликабельными. Если нестандартные, то можно переоформить с помощью стилей. При крайних положениях соответствющим кнопкам добавляется класс slick-disabled.
                                                                                        2. avatar Роман 29 июля 2016, 15:20 #
                                                                                          Привет. Подскажите есть вариант сделать различные эфекты перехода между слайдами? Кроме стандартного и fade?
                                                                                          1. avatar макс 27 июля 2016, 12:57 #
                                                                                            Здравствуйте, подскажите пожалуйста, я сделал слайдер вертикальным, как можно сделать, чтобы слайды выезжали только сверху.Или при нажатии вниз они выезжали сверху, а при нажатии вверх, они выезжали снизу?
                                                                                            1. avatar Simkin Andrew 27 июля 2016, 19:54 #
                                                                                              наверно, параметр vertical:true, других вариантов не знаю
                                                                                            2. avatar Алексей 13 июля 2016, 21:43 #
                                                                                              Подскажите, пожалуйста. А можно сделать так, чтобы слайды шли не по кругу, а туда сюда?
                                                                                              1. avatar Simkin Andrew 16 июля 2016, 17:12 #
                                                                                                кажется, нет такой возможности
                                                                                              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 Артем 17 июня 2016, 11:22 #
                                                                                                  Можно ли отключить зацикливание но при это сохранить автопрокрутку? когда делаю infinite:false и autoplay:true то зацикливание все равно остается. можно ли как то это решить?
                                                                                                  1. avatar Simkin Andrew 17 июня 2016, 13:45 #
                                                                                                    Автопрокрутка будет, но до последнего слайда, затем остановится. Сделать можно, но придётся писать свой js код, смотри событие beforeChange.
                                                                                                  2. avatar Василий 16 июня 2016, 12:52 #
                                                                                                    Можно как то сверстать dots в слик слайдере? Стрелки влево\вправо верстал, а dots как не подскажете?
                                                                                                    http://joxi.ru/DmBNMzZSNDoL8m
                                                                                                    1. avatar Simkin Andrew 17 июня 2016, 13:48 #
                                                                                                      Стили все можно редактировать. Если нужно для каждой точки свой стиль, то можно через CSS псевдокласс nth-child() это сделать. Может и другие способы есть, не знаю.
                                                                                                      1. avatar Михеев Сергей викторович 02 февраля 2017, 11:00 #
                                                                                                        можно. вчера такое сделал. просто переопредели стандартный класс слайдера
                                                                                                      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 Михалыч Пихалыч 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 Юрий 31 марта 2016, 21:53 #
                                                                                                            не нашел, можно ли не прокручивать слайдер по кругу? и будут ли при этом кнопки доходя до начала\конца дизейблится?
                                                                                                            1. avatar Simkin Andrew 31 марта 2016, 22:00(был изменён) #
                                                                                                              Параметр infinite: false, кнопки просто не будут дальше прокручивать.
                                                                                                            2. avatar Viktor 24 марта 2016, 15:29 #
                                                                                                              Добрый день, если слайдер находиться в табе который изначально скрыт. Как дописать событие что бы при клике на вкладку таба слайдер пере инициализировался. Сейчас когда клацаешь на таб слайдер валиться. Заранее спасибо! Если можно какой нибудь пример при клике как инициализировать его заного.
                                                                                                              1. avatar Simkin Andrew 24 марта 2016, 16:32 #
                                                                                                                У него нет переинициализации. Как вариант, при клике можно просто ещё раз выполнить его код. Но вообще, раз он валится, значит дочернему скрытому полю не задана фиксированая ширина. Что-то с вёрсткой.
                                                                                                                1. avatar Макс 26 января 2017, 20:42 #
                                                                                                                  Сам долго мучался с этой проблемой, но наконец нашел решение. там проблема не в слайдере, а в самих табах бутстрапа.

                                                                                                                  Вот решение https://newwebmaster.ru/2016/06/slick-in-bootstrap-tabs-and-equal-height.html
                                                                                                              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 Smoky 26 февраля 2016, 01:41 #
                                                                                                                  Подскажите, пожалуйста, есть ли в данном плагине возможно прокручивать слайды в случайном порядке + 1й слайд также всегда выводит рандомный?
                                                                                                                  1. avatar Simkin Andrew 26 февраля 2016, 09:25 #
                                                                                                                    Кажется нет, для этого надо самому при помощи php скрипта или ещё каких-то инструментов перемешивать слайды и затем их выводить.
                                                                                                                  2. 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 html 16 декабря 2015, 17:26 #
                                                                                                                      спасибо :)
                                                                                                                      1. 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, 14:26 #
                                                                                                                          как добавить еще дополнительные 2 кнопки вперед назад?
                                                                                                                          1. avatar Simkin Andrew 16 декабря 2015, 15:27 #
                                                                                                                            Верстаешь кнопки, создаёшь для них jquery обработчики для листания
                                                                                                                          2. avatar Raketa 11 декабря 2015, 12:36 #
                                                                                                                            Как сделать вертикальным?
                                                                                                                            1. avatar Simkin Andrew 11 декабря 2015, 12:39 #
                                                                                                                              vertical:true
                                                                                                                            2. avatar Marta 01 декабря 2015, 17:12 #
                                                                                                                              А как можно сделать что бы можно было копировать текст со слайдов?
                                                                                                                              1. avatar Simkin Andrew 01 декабря 2015, 17:44 #
                                                                                                                                отключить возможность перелистывания слайдера мышью, то есть параметр draggable установить в false
                                                                                                                              2. 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 #
                                                                                                                                      Дизайн слайдера каждый подстраивает под свой сайт, всем не угодишь.
                                                                                                                                © REALADMIN.RU   2018 г.
                                                                                                                                Страница сгенерирована: 0,2922 s | 14 mb.
                                                                                                                                На каком уровне Вы играете в шахматы?
                                                                                                                                О П Р О С
                                                                                                                                Home Question Top