Slick — лучший адаптивный слайдер для сайта

Slick — лучший адаптивный слайдер для сайта
Комментарии: 311

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

Скачать Slick slider 1.8.1

Подключение осуществляется следующим образом.

    // если ещё не подключен jQuery
    <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», внутри которого будет какое-то содержимое:

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

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

Рассмотрим примеры вызова «Slick slider» с разными настройками.

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

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

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

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

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

    $('.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

Адаптивность

Если на сайте адаптивная верстка, то слайдер можно подстроить под ширину экрана. Для этого используйте свойство «responsive». Оно позволяет установить для разных разрешений индивидуальные настройки. Рассмотрим пример.

$('.slick-example').slick({
	infinite: true,
	dots: true,
	slidesToShow: 3,
	slidesToScroll: 1,
	responsive: [
	    {
	      breakpoint: 768,
	      settings: {
	        slidesToShow: 2,
	      }
	    },
	    {
	      breakpoint: 480,
	      settings: {
	        slidesToShow: 1,
	      }
	    }
    ]
});

Здесь по умолчанию устанавливается отображение в ряд 3 слайда. Если ширина видимой области браузера от 768 до 481 пикселя — 2. И один, если ширина менее 480 пикселей.

В настройках адаптивности можно задавать любые параметры. Например, на мобильной версии сайта можно отключить стрелки навигации.

Настройки

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

ПараметрТип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'

Методы

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

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

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

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

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

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

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

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

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

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

События

События позволяют реагировать на определенные действия. Например, после прокрутки к 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. Николай
    Николай12 августа 2015, 13:16#
    Когда планируется закончить перевод? И хотелось бы еще примеры с пояснениями.
    1. Andy Si12 августа 2015, 13:53#
      Точно не знаю, на выходных возможно добавлю больше примеров. А так можно брать всё из англоязычного источника.
      1. Владимир
        Владимир29 сентября 2016, 15:50#
        И в чем смысл переводить? Ожидалось изменение дизайна слайдера
        1. Andy Si29 сентября 2016, 20:21#
          Дизайн слайдера каждый подстраивает под свой сайт, всем не угодишь.
    2. Marta
      Marta01 декабря 2015, 17:12#
      А как можно сделать что бы можно было копировать текст со слайдов?
      1. Andy Si01 декабря 2015, 17:44#
        отключить возможность перелистывания слайдера мышью, то есть параметр draggable установить в false
      2. Raketa
        Raketa11 декабря 2015, 12:36#
        Как сделать вертикальным?
        1. Andy Si11 декабря 2015, 12:39#
          vertical:true
        2. html
          html16 декабря 2015, 14:26#
          как добавить еще дополнительные 2 кнопки вперед назад?
          1. Andy Si16 декабря 2015, 15:27#
            Верстаешь кнопки, создаёшь для них jquery обработчики для листания
          2. html
            html16 декабря 2015, 15:34#
            а можно по подробней пример скинуть кода? я в JQuery не очень
            1. Andy Si16 декабря 2015, 16:03#
              Подробно некогда объяснять, как-то так:
              $('.btn-next').on('click',function(){ $('#slick').slick('slickNext'); });
              $('.btn-prev').on('click',function(){ $('#slick').slick('slickPrev'); });
            2. html
              html16 декабря 2015, 17:26#
              спасибо :)
              1. Virtas
                Virtas18 января 2016, 13:12#
                Скажите а как вместо навигации (кнопок) сделать текст (ссылки) например Блок1 Блок2 Блок3 итд
                1. Andy Si18 января 2016, 14:33#
                  Убирай точки, верстай под слайдером ссылки и вешай на них jQuery обработчики onClick. При нажатии на ссылку чтобы выполнялся код перехода к нужному слайду. За переход к нужному слайду в slick отвечает метод slickGoTo. Типа перейти к определенному слайду:
                  $('.your-element').slickGoTo(5);
                2. Smoky
                  Smoky26 февраля 2016, 01:41#
                  Подскажите, пожалуйста, есть ли в данном плагине возможно прокручивать слайды в случайном порядке + 1й слайд также всегда выводит рандомный?
                  1. Andy Si26 февраля 2016, 09:25#
                    Кажется нет, для этого надо самому при помощи php скрипта или ещё каких-то инструментов перемешивать слайды и затем их выводить.
                  2. Рита
                    Рита11 марта 2016, 00:12#
                    Здравствуйте! А как при клике с первого на третий слайд не показывать второй? Если используется обычная анимация ( не fade)
                    1. Andy Si11 марта 2016, 10:03#
                      Не понял как это. Удали просто второй слайд, если его показ не нужен.
                      1. Рита
                        Рита11 марта 2016, 10:23#
                        Его показ нужен, работает autoplay и все слайды показываются по очереди. Но как быть если пользователь принудительно нажимая на дотс переключает с первого сразу на третий. Как в этом случае пропускать второй?
                        1. Andy Si13 марта 2016, 18:28#
                          Я понял, не вижу таких возможностей. Если только писать какие-то свои jquery обработчики для нажания на дотс.
                          1. Рита
                            Рита14 марта 2016, 12:22#
                            нашла выход — SwiperJS
                            1. Andy Si14 марта 2016, 13:10#
                              Ну да, как вариант — использовать другой слайдер.
                    2. Viktor
                      Viktor24 марта 2016, 15:29#
                      Добрый день, если слайдер находиться в табе который изначально скрыт. Как дописать событие что бы при клике на вкладку таба слайдер пере инициализировался. Сейчас когда клацаешь на таб слайдер валиться. Заранее спасибо! Если можно какой нибудь пример при клике как инициализировать его заного.
                      1. Andy Si24 марта 2016, 16:32#
                        У него нет переинициализации. Как вариант, при клике можно просто ещё раз выполнить его код. Но вообще, раз он валится, значит дочернему скрытому полю не задана фиксированая ширина. Что-то с вёрсткой.
                        1. Макс
                          Макс26 января 2017, 20:42#
                          Сам долго мучался с этой проблемой, но наконец нашел решение. там проблема не в слайдере, а в самих табах бутстрапа.

                          Вот решение https://newwebmaster.ru/2016/06/slick-in-bootstrap-tabs-and-equal-height.html
                      2. Юрий
                        Юрий31 марта 2016, 21:53#
                        не нашел, можно ли не прокручивать слайдер по кругу? и будут ли при этом кнопки доходя до начала\конца дизейблится?
                        1. Andy Si31 марта 2016, 22:00(был изменён)#
                          Параметр infinite: false, кнопки просто не будут дальше прокручивать.
                        2. Михалыч Пихалыч
                          Михалыч Пихалыч31 мая 2016, 12:13#
                          Всем привет! делаю все как по инструкции а слайдер не запускается, только дивы выводятся с 1 до 6, пишет что не удалось загрузить jquery 1.11.1
                          1. Andy Si31 мая 2016, 13:40#
                            Значит Вы пытаетесь его загрузить от туда, где его нет. Используйте код из примера, я проверил, по предоставленной ссылке корректно грузится jquery-1.11.0.min.js
                          2. Роман
                            Роман15 июня 2016, 16:41#
                            Привет! Подскажите пожалуйста. Есть такой слайдер http://joxi.ru/l2ZNglxS81Ydq2
                            Большой слайдер с 1й картинкой вверху и ниже маленький слайдер с 5ю картинками и ниже dots с привязкой к нижнему слайдеру. При клике на нижнем слайдере на слайд, у нас на верхнем слайдере выводится эта картинка в большом разрешении, dots(кружочек ниже) становится белым, т.к. стал активным другой слайд. При листании стрелочками большого слайдера, в нижнем слайдере меняется белая окантовка(активный слайд) и dots(белый кружочек)
                            Заранее спасибо!
                            1. Andy Si15 июня 2016, 17:12#
                              Я не понял — что не так. Судя по описанию все работает логично. В чём проблема?
                              1. Роман
                                Роман15 июня 2016, 17:17#
                                забыл сам вопрос задать)) как мне всё это друг с другом связать? если б был вверху слайдер и просто внизу, проблем бы небыло. А так ещё эти кружочки и активный слайй…
                                1. Andy Si15 июня 2016, 17:24#
                                  Есть такой параметр у slick — asNavFor, с помощью него можно связать два слайдера. В этом параметре указывается идентификатор другого слайдера, то есть при вызове slick у обоих слайдеров добавить asNavFor: '.slider-2' и asNavFor: '.slider-1'.
                                  1. Роман
                                    Роман15 июня 2016, 17:34(был изменён)#
                                    Это да… а как быть с кружочками? Что б на каждый слайд был свой кружочек? И что б у активного слайда была обводка?
                                    1. Andy Si15 июня 2016, 17:40#
                                      Не знаю если честно, это надо смотреть, можно ли стилями оформить, если нет, возможно, самому придется на js что-то дописывать.
                                      1. Роман
                                        Роман15 июня 2016, 17:43#
                                        а вот ты писал, что есть такой метод
                                        $('.your-element').slickGoTo(5);
                                        Если его применить на кружочки сверстанные и на нижний слайдер. Только я не понял как этот скрипт применить. Подскажешь?
                                        1. Andy Si16 июня 2016, 09:47#
                                          Это метод, который позволяет перейти к определённому слайду. Нужно, повесить обработчик на событие setPosition обоих слайдеров и в них использовать метод slickCurrentSlide чтобы узнать ID слайда текущего слайдера и присвоить его второму слайдеру через slickGoTo. Скрипт не напишу, так как это надо всё пробовать на боевом примере, нет на это времени.
                                          1. Роман
                                            Роман16 июня 2016, 12:37#
                                            спасибо, я уже написал)
                            2. Василий
                              Василий16 июня 2016, 12:52#
                              Можно как то сверстать dots в слик слайдере? Стрелки влево\вправо верстал, а dots как не подскажете?
                              http://joxi.ru/DmBNMzZSNDoL8m
                              1. Andy Si17 июня 2016, 13:48#
                                Стили все можно редактировать. Если нужно для каждой точки свой стиль, то можно через CSS псевдокласс nth-child() это сделать. Может и другие способы есть, не знаю.
                                1. Михеев Сергей викторович
                                  Михеев Сергей викторович02 февраля 2017, 11:00#
                                  можно. вчера такое сделал. просто переопредели стандартный класс слайдера
                                2. Артем
                                  Артем17 июня 2016, 11:22#
                                  Можно ли отключить зацикливание но при это сохранить автопрокрутку? когда делаю infinite:false и autoplay:true то зацикливание все равно остается. можно ли как то это решить?
                                  1. Andy Si17 июня 2016, 13:45#
                                    Автопрокрутка будет, но до последнего слайда, затем остановится. Сделать можно, но придётся писать свой js код, смотри событие beforeChange.
                                  2. Женя
                                    Женя20 июня 2016, 17:19#
                                    Как исправить дёргание в slickslider? Есть проект arcticdog.ru, чуть ниже есть вертикальный слайдер joxi.ru/52akLvBSG56Vkr. При перелистывании слайда, нас автоматически тянет вверх экрана или вниз. Не знаешь как это можно исправить?
                                    1. Andy Si21 июня 2016, 20:41#
                                      Не знаю. Найдёшь как, отпиши… может кому пригодится решение.
                                      1. Женя
                                        Женя23 июня 2016, 13:21#
                                        accessibility: false
                                        1. Andy Si23 июня 2016, 14:32#
                                          Точно. Спс.
                                    2. Алексей
                                      Алексей13 июля 2016, 21:43#
                                      Подскажите, пожалуйста. А можно сделать так, чтобы слайды шли не по кругу, а туда сюда?
                                      1. Andy Si16 июля 2016, 17:12#
                                        кажется, нет такой возможности
                                      2. макс
                                        макс27 июля 2016, 12:57#
                                        Здравствуйте, подскажите пожалуйста, я сделал слайдер вертикальным, как можно сделать, чтобы слайды выезжали только сверху.Или при нажатии вниз они выезжали сверху, а при нажатии вверх, они выезжали снизу?
                                        1. Andy Si27 июля 2016, 19:54#
                                          наверно, параметр vertical:true, других вариантов не знаю
                                        2. Роман
                                          Роман29 июля 2016, 15:20#
                                          Привет. Подскажите есть вариант сделать различные эфекты перехода между слайдами? Кроме стандартного и fade?
                                          1. Наталья
                                            Наталья04 октября 2016, 13:25#
                                            Привет! Подскажите пожалуйста, как изменить кнопки (вперед/назад) при окончании слайдера? т.е. у каждой кнопки есть 2 картинки (активная красная и неактивная-серая) как при дохождении до последнего слайда кнопку поменять с активной на неактивную?
                                            1. Andy Si04 октября 2016, 14:53#
                                              Привет… настройка infinite: false запрещает циклическое прокручивание. Если кнопки стандратные, то они автоматически станут неактивными и некликабельными. Если нестандартные, то можно переоформить с помощью стилей. При крайних положениях соответствющим кнопкам добавляется класс slick-disabled.
                                            2. Андрей
                                              Андрей10 октября 2016, 18:28#
                                              добрый день!
                                              имеется слайдер, сделал его вертикальным через vertical:true, подскажите пожалуйста, можно ли как-то динамически изменять это значение на false?

                                              а то в моб версии он снова горизонтальный, спасибо
                                              1. Andy Si10 октября 2016, 20:04#
                                                Динамически изменять нельзя. И не понятно, как в мобильной версии он мог стать горизонтальным. Эта настройка не зависит от расширения экрана. Может с вёрсткой что-то не так.
                                                1. Оксана
                                                  Оксана16 декабря 2016, 12:59(был изменён)#
                                                  Динамически можно изменять с помощью берэйкпоинтов
                                                  responsive: [
                                                       	{
                                                        		breakpoint: 900,
                                                        		settings: {
                                                          		slidesToShow: 4,
                                                          		vertical:true,
                                                        		}
                                                        	}
                                                  1. Andy Si16 декабря 2016, 21:30#
                                                    Точно, забыл что есть такая возможность.
                                                2. Ирина
                                                  Ирина03 ноября 2016, 11:34#
                                                  Добрый день, подскажите пожалуйста, как в слайдере сделать динамическое добавление слайдов. вот как на этом сайте в галерее:http://simonna-wedding.com.ua/portfolio-container «Счастье, которое мы подарили». На десктопе в одном слайде 2 колонки-правая с большой фото, левая — с двумя маленькими. На планшете левая колонка (с маленькими фото) как-то становится отдельным слайдом. А на мобильных — вообще каждая фото — это отдельный слайд.
                                                  1. Andy Si03 ноября 2016, 11:58#
                                                    Добрый… это к настройкам слайдера не относится. Для этого необходима адаптивная вёрстка содержимого слайдов. То есть Вам для решения этой задачи нужно искать верстальщика.
                                                  2. Zergiuz
                                                    Zergiuz19 декабря 2016, 11:22#
                                                    День добрый! Подскажите пожалуйста как создать два слайдера на одной странице?
                                                    Ну я понимаю что в JS все «объект», а как создать второй слайдер не пойму(
                                                    Заранее спасибо!
                                                    1. Andy Si19 декабря 2016, 12:02#
                                                      Добрый день. Создаёте на странице разметку для двух слайдеров, указываете им только разные классы и в js коде два раза для каждого прописываете инициализацию слайдера:
                                                      $('.slider-one').slick();
                                                      $('.slider-two').slick();
                                                      
                                                      В скобках для каждого слайдера уже можно указывать свои индивидуальные параметры.
                                                    2. Алиса
                                                      Алиса14 января 2017, 12:17#
                                                      Добрый день!
                                                      Как сделать прокрутку «вверх» до якоря по нажатию на элемент dots? Рисую слайдер 3х3, навигация внизу, надо чтобы когда осуществлялся переход на новый слайд, срабатывало событие ScrollToTop.
                                                      1. Andy Si14 января 2017, 15:24#
                                                        Не понял как это, слайдер 3 на 3. Отследить переход на новый слайд можно так:
                                                        $('#slick-slider').on('afterChange', function(event, slick, currentSlide){
                                                        // тут переход куда-то наверх
                                                        });
                                                        
                                                        как перейти именно к якорю, не знаю. Нужно что-то придумывать.
                                                        1. Алиса
                                                          Алиса14 января 2017, 19:31#
                                                          Спасибо, с этим разобралась. Есть ещё одна проблема:
                                                          Подскажите почему не срабатывают вкладки jsfiddle.net/xv1ogzkt при переключении? Если row 1, то норм, если больше начинает падать.
                                                          1. Andy Si16 января 2017, 10:11#
                                                            Не смогу подсказать. Возможно, несовместимы параметры.
                                                      2. Вячеслав
                                                        Вячеслав20 января 2017, 17:07#
                                                        Добрый день. Подскажите плиз, если я ставлю slidesToShow: 4, slidesToScroll: 1 и при этом у меня количество слайдов меньше 4, то клонирования не происходит. Так бывает если например у меня блок просмотренных товаров повешен на слайдер, а пользователь просмотрел 1, 2 товара. Пусть они даже не будут клонироваться, но как сделать чтоб они центрировались? Спасибо!
                                                        1. Andy Si22 января 2017, 22:00#
                                                          Ну я думаю, уже что-то придумал сам. У меня при таких параметрах слайдер вообще не листается. Ну а центрировать можно параметром: centerMode: true
                                                        2. Мария
                                                          Мария01 февраля 2017, 00:47#
                                                          Здравствуйте.
                                                          Не подскажите, можно ли сделать так, чтоб при нажатии на кнопки (стрелки) проматывался 1 слайд, а во время автопрокрутки — 2 слайда?
                                                          1. Andy Si01 февраля 2017, 21:38#
                                                            Просто настройками вроде нельзя. Только писать свои обработчики на нажатие кнопок на jquery. Типа:
                                                            $('#slick-slider .slick-next').on('click',function(e){
                                                            	e.preventDefault();
                                                            	$('#slick-slider').slick('slickNext');
                                                            	return;
                                                            });
                                                            Но не испытывал, может где-то ошибка.
                                                          2. Игорь
                                                            Игорь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. Andy Si15 февраля 2017, 09:36(был изменён)#
                                                              Видимо какие-то скрипты навешаны, точно не скажу. При изменении размера окна всё сильно тормозит. Обычно адаптивность в slick делают через параметр breakpoint, где можно уменьшать кол-во выводимых слайдов при конкретном разрешении. Тут про это писали — https://realadmin.ru/saytostroy/slick-slider.html#comment-1175
                                                              1. Игорь
                                                                Игорь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. Andy Si15 февраля 2017, 20:41#
                                                                  Стили CSS пропиши: .slick-arrow.slick-disabled { display: none; }
                                                            2. Rulle
                                                              Rulle03 апреля 2017, 13:52#
                                                              Здравствуйте!
                                                              На сайте стоит слайдер на автоплее. Где-то в середине страницы.
                                                              Если не «трогать» его, не кликать, не пролистывать мышкой, то ведет себя нормально, но если же сделать какую-либо манипуляцию с ним, пролистать, кликнуть по одному из баннеров, то становится невозможно прокручивать страницу и просматривать её иные фрагменты. Вернее, страница, содержащая слайдер, всегда возвращается к слайдеру, размещая его по середине. То есть я прокручиваю страницу вверх — она сама прокручивается на слайдер. То же самое вниз — прокрутил вниз, страница сама вернулась на слайдер.
                                                              В чем может быть проблема?
                                                              Спасибо.
                                                              1. Rulle
                                                                Rulle03 апреля 2017, 14:00#
                                                                Выше ответил Женя.
                                                                accessibility: false
                                                                Спасибо!
                                                              2. Антон
                                                                Антон18 апреля 2017, 11:36#
                                                                При старте страницы слайдер немного тупит и слайды не прячуться, а налазят друг на друга
                                                                1. Andy Si18 апреля 2017, 13:44#
                                                                  Это следует решать только с помощью CSS, в каждом случае индивидуально. Слайдер не может мгновенно начать работать, но можно попробовать ускорить этот процесс, перенести код в самое начало страницы. Оптимизировать css стили, чтобы даже тогда когда слайдер ещё не начал работать, ничего не ехало. В общем, это всё индивидуально.
                                                                2. Александр
                                                                  Александр28 апреля 2017, 18:25#
                                                                  Добрый день.
                                                                  Подскажите в чем проблема, я подключил в слайдере свойство draggable: false, т.е. отключил прокручивание картинок с помощью мышки и оставил прокрутку с помощью кнопок. На компьютере свойство работает, но на мобильном устройстве НЕТ. Как отключить прокручивание картинок пальцем, оставить только кнопки?
                                                                  Спасибо.
                                                                  1. Andy Si29 апреля 2017, 08:25#
                                                                    draggable относится только к мышки. Чтобы отключить прокручивание пальцем используй свойство swipeToSlide:false
                                                                  2. Богдан
                                                                    Богдан01 мая 2017, 21:30#
                                                                    Всем привет! Такой вопрос: как убрать возможность кликать пока фотка не пролисталась?
                                                                    1. Владимир
                                                                      Владимир08 мая 2017, 23:10#
                                                                      Помогите пожалуйста! Нужно в slick слайдере сделать фиксированную ширину слайдов-1170px на больших разрешениях(более 1200px) при этом активный(текущий) слайд должен быть всегда по центру а остальные слайды должны быть видны в зависимости от разрешения(чем больше разрешение тем больше влазит по бокам остальных слайдов) Очень нужно)
                                                                      1. Andy Si09 мая 2017, 14:45#
                                                                        Адаптивная вёрстка слайдера по ТЗ — это на фриланс площадки.
                                                                      2. Макс
                                                                        Макс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. Andy Si20 мая 2017, 11:02#
                                                                          Как-нибудь можно. Наверно, надо ставить focusOnSelect=false, и писать отдельный обработчик для активации при нажатии на кнопки перелистывания. Хотя может и проще как-то можно. Не сталкивался.
                                                                        2. Aidai
                                                                          Aidai21 июня 2017, 13:03#
                                                                          подскажите пожалуйста есть ли возможность сделать так, чтобы слайдер начинал прокрутку только при наведении на него мышью? если нет, то какое событие и действие необходимо переопределить? спасибо!
                                                                          1. Andy Si21 июня 2017, 21:02#
                                                                            из коробки такой возможности, вроде нет. Наверно, надо использовать события mouseover и mouseout чтобы отслеживать приход и уход курсора на слайдер. И автоматом включать или отключать его автопрокрутку —
                                                                            $('.mainSlider').slickPlay();
                                                                            $('.mainSlider').slickPause();
                                                                          2. Кузя
                                                                            Кузя22 июня 2017, 14:21#
                                                                            Здравствуйте. у меня вопрос: только начал изучать slick и не понял если в центрированном виде нужна карусель в html что надо а в js как я понял нужно вставлять с самого сайта slick (demos=>centredmode) помогите разобраться пж
                                                                            1. Andy Si22 июня 2017, 22:46#
                                                                              В html все как в примерах. Ничего дополнительного не требуется.
                                                                            2. Вика
                                                                              Вика09 сентября 2017, 18:38#
                                                                              Здравствуйте.
                                                                              Подскажите а можно сделать полосу прокрутки у слик слайдера вместо навигационных точек??
                                                                              Очень надо!!!
                                                                              1. Andy Si09 сентября 2017, 20:38#
                                                                                из коробки такого функционала нет. Программист на javascript наверно сможет придумать как сделать.
                                                                                1. Alex_SVG
                                                                                  Alex_SVG13 октября 2017, 16:29#
                                                                                  можно допилить самому это не проблема.
                                                                                2. Павел
                                                                                  Павел26 сентября 2017, 17:38(был изменён)#
                                                                                  Спасибо вам огромное за перевод!!!
                                                                                  1. Александр
                                                                                    Александр07 ноября 2017, 16:39#
                                                                                    Не подскажете:
                                                                                    Скачал шаблон, в нем это слайдер. разобрался, что за слайдер отвечает скрипт slick.min.js. Не могу понять как сделать больше паузы между слайдами, уже меня разные значения.
                                                                                    1. Andy Si08 ноября 2017, 17:03#
                                                                                      Скорость автопрокрутки задается параметром autoplaySpeed в коде инициализации слайдера. А уж где этот код в шаблоне — это надо искать. Если этого параметра там нет, то используется значение по умолчанию — 3 секунды.
                                                                                    2. Игорь
                                                                                      Игорь01 февраля 2018, 20:21#
                                                                                      Здравствуйте, подскажите как сделать некоторые фотографии вертикальными? то есть в любом стандартном редакторе комп сам поворачивает фотографии, если они сфотографированы вертикально. Добавил слайдер и все фотки и горизонтальные и вертикальные стали горизонтальными.
                                                                                      1. Andy Si02 февраля 2018, 11:54#
                                                                                        Добрый день. Для слайдера надо заранее подготовить фото, желательно одного размера и одной ориентации. Сам слайдер ориентацию фоток не исправит.
                                                                                        1. Игорь
                                                                                          Игорь03 февраля 2018, 12:09#
                                                                                          Всё спасибо разобрался. думал если в редакторе фотка сама поворачивается, то значит она вертикальная, а на самом деле они все у меня горизонтальные и редактор сам как-то определяет какие поворачивать)
                                                                                      2. Руслан
                                                                                        Руслан09 февраля 2018, 15:10#
                                                                                        Ребята подскажите плиз, как сделать что бы слайдер всегда начинался с разных картинок или тут это нельзя сделать?
                                                                                        1. Andy Si09 февраля 2018, 16:29(был изменён)#
                                                                                          Есть такой параметр как initialSlide — номер слайда с которого начинать показ. Можно в неё присваивать случайное число, допустим, от 0 до 10:
                                                                                          var rand = Math.floor(Math.random() * 10);
                                                                                          а в вызове слайдера добавить: 
                                                                                          'initialSlide' : rand
                                                                                        2. Вячеслав
                                                                                          Вячеслав10 февраля 2018, 03:37#
                                                                                          Скрипт хорош! Но с новой библиотекой не работает
                                                                                          https://code.jquery.com/jquery-3.1.1.min.js
                                                                                          1. Andy Si11 февраля 2018, 18:45#
                                                                                            Работает. У меня здесь jquery 3.2.1
                                                                                            1. Вячеслав
                                                                                              Вячеслав11 февраля 2018, 19:11(был изменён)#
                                                                                              Разобрался. Отличный скрипт.
                                                                                              Спасибо!
                                                                                              1. Вячеслав
                                                                                                Вячеслав11 февраля 2018, 19:37#
                                                                                                Для идеала не хватает прокрутки мышкой с помощью плагина jquery.mousewheel.js или ещё как.
                                                                                                1. Stas
                                                                                                  Stas02 апреля 2019, 19:16#
                                                                                                  Расскажите как запустили на jquery 3.х
                                                                                                  1. Andy Si05 апреля 2019, 14:59#
                                                                                                    если используете последнюю версию slick, то никаких проблем c jquery 3 не должно быть.
                                                                                            2. Александр
                                                                                              Александр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. Andy Si23 февраля 2018, 15:14#
                                                                                                Только если отключить перелистывание слайдера свайпом
                                                                                                draggable=false
                                                                                              2. Тимур
                                                                                                Тимур06 марта 2018, 14:46#
                                                                                                Что за касперы тут летают? О_О
                                                                                                1. Andy Si08 марта 2018, 12:14#
                                                                                                  Завелось одно :)
                                                                                                  1. Антон
                                                                                                    Антон08 марта 2018, 12:29#
                                                                                                    а как оно вызывается?)
                                                                                                    1. Andy Si08 марта 2018, 19:03#
                                                                                                      Само прилетает иногда, когда захочет))
                                                                                                      1. Антон
                                                                                                        Антон09 марта 2018, 01:51#
                                                                                                        хм… интересно на какие «плюшки» приманивается?) уж больно симпатичное привидение)))
                                                                                                2. Антон
                                                                                                  Антон07 марта 2018, 22:10#
                                                                                                  Доброго всем! Подскажите, если есть 2 связанных слайдера (большой с 1 картинкой и маленький на 6 картинок). хотелось бы:
                                                                                                  1) затемнить те слайды, которые неактивны
                                                                                                  2) активный слайд большого слайдера соответствовал бы 2 или 3ему слайду маленького. (centerMode — оставляет «обрезанные» кадры по бокам, что не желательно.)
                                                                                                  Премного благодарен за любой совет и помощь!
                                                                                                  1. Andy Si08 марта 2018, 12:25#
                                                                                                    Для затенения попробуй стилями прописать фон полупрозрачный тёмный для всех слайдеров, кроме активного:
                                                                                                    slider .slick-slide {
                                                                                                        background-color: rgba(0,0,0,.2) !important;
                                                                                                    }
                                                                                                    
                                                                                                    slider .slick-active {
                                                                                                        background-color: none !important;
                                                                                                    }
                                                                                                    Или можно с прозрачностью слайдов поиграться.

                                                                                                    А по 2му пункту ничего не могу сказать, не понял как это. Наверно, нельзя сделать.
                                                                                                    1. Антон
                                                                                                      Антон08 марта 2018, 12:29#
                                                                                                      благодарю! интересно, а без !important можно как-то стили слайдера перебить? уж очень не любят у нас, когда используют это свойство((
                                                                                                      1. Andy Si08 марта 2018, 19:01#
                                                                                                        Да можно и без этого — тогда стили просто править в файле slick-theme.css Там прописано всё оформление для слайдера.
                                                                                                        1. Антон
                                                                                                          Антон09 марта 2018, 01:51#
                                                                                                          спасибо! ушел экспериментировать!
                                                                                                  2. zaramar
                                                                                                    zaramar09 марта 2018, 13:32#
                                                                                                    Доброго времени суток, у меня такая проблема:
                                                                                                    Заменил стандартные кнопки прокрутки на свои, но они стали не по бокам слайдера а поверх него и под ним, как можно изменять расположение этих самых кнопок?
                                                                                                    1. fortsev
                                                                                                      fortsev26 марта 2018, 16:03#
                                                                                                      Можно, меняя стили классов .slick-next и .slick-prev
                                                                                                    2. al.
                                                                                                      al.09 марта 2018, 17:26#
                                                                                                      всем привет! Помогите решить проблему. При нажатии на слайд обводится синим, как убрать?
                                                                                                      1. zaramar
                                                                                                        zaramar09 марта 2018, 21:21#
                                                                                                        .класс слайдов{
                                                                                                        outline:none;
                                                                                                        }
                                                                                                        
                                                                                                      2. Руслан
                                                                                                        Руслан14 марта 2018, 16:17#
                                                                                                        Использую ваш слайдер как слайдер для отзывов, все отлично, супер, но ломаю голову, один отзыв у меня занимает 3 строчки а другой отзыв 12 строчек, как сделать так что бы слайдер реагировал на высоту контейнера и высота блока менялась в зависимости от наполения в одном слайде, затуркался никак не могу увидеть :(
                                                                                                        1. Andy Si14 марта 2018, 19:35#
                                                                                                          Проще всего прописать всем слайдам с помощью CSS стилей min-height. Установить минимальную высоту равной высоте самого высокого слайда.
                                                                                                          Либо, писать скрипт на js, который сам будет определять макс. высоту слайдов и устанавливать её для всех слайдов. Но скрипт я не помогу написать — лень.
                                                                                                          1. Andy Si14 марта 2018, 19:37#
                                                                                                            Да, вот так типа:
                                                                                                            <style>.slick-slide {min-height: 200px;}</style>
                                                                                                            1. Константин
                                                                                                              Константин05 апреля 2018, 14:08#
                                                                                                              У слайдера для этого есть специальный параметр
                                                                                                              adaptiveHeight: true
                                                                                                              1. Руслан
                                                                                                                Руслан06 апреля 2018, 10:20#
                                                                                                                Ты просто мой спаситель) благодарочка)))
                                                                                                            2. Елена
                                                                                                              Елена14 марта 2018, 22:34#
                                                                                                              Доброго вечера! не подскажете, можно ли настроить «dots» на свой вкус?
                                                                                                              1. Andy Si15 марта 2018, 15:07(был изменён)#
                                                                                                                Добрый день. Можно, оформление с помощью CSS стилей. Прописано в файле slick-theme.css Селектор начинается с .slick-dots li button
                                                                                                              2. Елена
                                                                                                                Елена16 марта 2018, 14:28#
                                                                                                                Спасибо за предыдущий ответ! еще такой вопрос: есть слайдер, листающий по 1 картинке с прозрачным фоном. Если нажать на картинку слайдера, то появляется обводка… как ее убрать? Заранее спасибо!
                                                                                                                1. Елена
                                                                                                                  Елена17 марта 2018, 03:37(был изменён)#
                                                                                                                  вопрос снят. разобралась.
                                                                                                                  .slick-slide:focus {outline: none;}
                                                                                                                  1. Andy Si17 марта 2018, 10:25#
                                                                                                                    Да, именно так. Забыл ответить.
                                                                                                                2. Алекс
                                                                                                                  Алекс16 марта 2018, 21:54#
                                                                                                                  Доброго времени суток! Столкнулся с такой проблемой, на мобильном при листании страницы, дойдя да карусели происходит остановка, т.е. дальше страницу прокрутить не могу ерзая пальцем по экрану в области карусели. Карусель листается вправо-влево, а страница вверх-вниз не двигается. Кто сталкивался, подскажите как победить?
                                                                                                                  1. Andy Si16 марта 2018, 23:36#
                                                                                                                    Пропиши параметр в вызове слайдера:
                                                                                                                    accessibility: false
                                                                                                                    1. Алекс
                                                                                                                      Алекс17 марта 2018, 06:44#
                                                                                                                      Не помогает. Да я думаю навигация клавишами и не при чем тут. Есть еще варианты?
                                                                                                                      1. Andy Si17 марта 2018, 10:27#
                                                                                                                        Ниже в комментариях писали про такой случай, говорили что помогает. Ещё вариант обновить скрипт slick до последней версии, 1.8 кажется. И проверить корректность вёрстки. Больше ничего предложить не могу.
                                                                                                                        1. Алекс
                                                                                                                          Алекс17 марта 2018, 12:43#
                                                                                                                          Спасибо! Проблема решилась после обновления до версии 1.8. Кстати, работает независимо от параметра accessibility.
                                                                                                                  2. Евгений
                                                                                                                    Евгений22 марта 2018, 00:12#
                                                                                                                    Здравствуйте, может вы поможете. Установил, настроил вроде все отлично, но при уменьшении масштаба браузера картинка тоже уменьшается и съезжает в левую сторону, на маленьких экранах все ок а на больших картинка с левой стороны.
                                                                                                                    1. Andy Si22 марта 2018, 09:47#
                                                                                                                      Надо чтоб верстальщик посмотрел и поправил, что-то с CSS стилями не так.
                                                                                                                    2. Пирожок
                                                                                                                      Пирожок13 апреля 2018, 13:59#
                                                                                                                      Добрый день. При добавлении сюда autoplay — в CMS Битрикс все работает. Если отрывать без администрирования и в других браузерах — autoplay не работает. В чем может быть причина?

                                                                                                                      $('.top_slider<?=$uniquePart;?>').slick({
                                                                                                                              slidesToShow: 1,
                                                                                                                              slidesToScroll: 1,
                                                                                                                              autoplay: true,
                                                                                                                              autoplaySpeed: 900,
                                                                                                                              arrows: true,
                                                                                                                              fade: true
                                                                                                                      });
                                                                                                                              
                                                                                                                      1. Andy Si13 апреля 2018, 21:04#
                                                                                                                        Не могу сказать, ошибки надо смотреть в консоли браузера.
                                                                                                                      2. Олег
                                                                                                                        Олег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. Andy Si17 апреля 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. Андрей
                                                                                                                          Андрей01 мая 2018, 16:36#
                                                                                                                          Здравствуйте! Как сделать, чтобы показ слайдов начинался с произвольного номера (например, с 5-го)?
                                                                                                                          1. Andy Si03 мая 2018, 10:59#
                                                                                                                            При вызове слайдера указать initialSlide=5
                                                                                                                            1. Андрей
                                                                                                                              Андрей03 мая 2018, 13:41#
                                                                                                                              Спасибо!
                                                                                                                            2. Руслан
                                                                                                                              Руслан10 мая 2018, 13:24#
                                                                                                                              var rand = Math.floor(Math.random() * 10);
                                                                                                                              а в вызове слайдера добавить:
                                                                                                                              'initialSlide': rand
                                                                                                                              Рандомной выпадает каждый раз разный слайд
                                                                                                                              1. Андрей
                                                                                                                                Андрей11 мая 2018, 00:38#
                                                                                                                                Спасибо огромное!
                                                                                                                            3. Leo
                                                                                                                              Leo16 мая 2018, 17:45#
                                                                                                                              Скажите пожалуйста. могу ли я реализовать такую задумку если да, то как?
                                                                                                                              слайдер, например из 10 div.slider-elem, показывать на странице три из них (по дефолту все три будут иметь класс slick-active), НО что бы из показанных трех slick-active был только одни! я хочу одному из показанных слайдов сделать другие стили, но по дефолту все отображенные на странице div имеют класс slide-active
                                                                                                                              Хочу что бы была карусель из 10 элементов, показывало на странице три, и активный был только один, например активный сделать Крупным
                                                                                                                              1. Mila
                                                                                                                                Mila24 мая 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. Andy Si24 мая 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. Mila
                                                                                                                                    Mila24 мая 2018, 12:51#
                                                                                                                                    Спасибо большое! Сейчас попробую.
                                                                                                                                2. Mikhail
                                                                                                                                  Mikhail27 июня 2018, 20:13#
                                                                                                                                  Добрый день хотел спросить! Допустим два слайдера друг под ругом они связаны на мобильной версии и на таблетке можно ли сделать чтоб на десктопе они отображались вертикально? Спасибо за ответ!
                                                                                                                                  1. Andy Si28 июня 2018, 14:23#
                                                                                                                                    Добрый день. Уже подсказывали в комментариях. Следует использовать свойство responsive с разными параметрами для разных разрешений.
                                                                                                                                    responsive: [
                                                                                                                                         	{
                                                                                                                                          		breakpoint: 900,
                                                                                                                                          		settings: {
                                                                                                                                            		slidesToShow: 4,
                                                                                                                                            		vertical:true,
                                                                                                                                          		}
                                                                                                                                          	}
                                                                                                                                    
                                                                                                                                  2. Станислав
                                                                                                                                    Станислав30 июля 2018, 11:37#
                                                                                                                                    День добрый, при загрузке ajax новый блоков со слайдерами выдается ошибка TypeError: null is not an object (evaluating 'e.$slides.add'), не происходит инициализации, как ее выполнить после выполнения ajax?
                                                                                                                                    1. Andy Si01 августа 2018, 12:28#
                                                                                                                                      Нужно сначала подгружать блок, а потом запускать slick()…
                                                                                                                                      1. Станислав
                                                                                                                                        Станислав01 августа 2018, 13:35#
                                                                                                                                        Делаем и так, но выдает ошибку выше
                                                                                                                                        1. Станислав
                                                                                                                                          Станислав01 августа 2018, 13:49#
                                                                                                                                          Вот так http://brickhouse.supprix.ru/projects/
                                                                                                                                          Вызов после выполнения аякс:
                                                                                                                                          https://yadi.sk/i/pVJezWJs3ZnmX8
                                                                                                                                      2. Александр
                                                                                                                                        Александр29 августа 2018, 13:37#
                                                                                                                                        Здравствуйте! Не могу нигде найти ответ на вопрос, даже на спецресурсах типа «Тостер» не ответили. Вопрос касается превью на «Slick-slider». В общем, проблема такая. При уменьшении окна браузера или в режиме " autoplay: true" превью не сохраняется в указанном количестве. Из установленных 3-х, на экране остаются 2, потом — 1. Но если установить 5 миниатюр при " slidesToShow: 3,", то все работает корректно. Спасибо заранее!
                                                                                                                                        Ссылка на JSFiddle
                                                                                                                                        1. Andy Si29 августа 2018, 21:29#
                                                                                                                                          Не смог разобраться, может баг какой-то в самом плагине.
                                                                                                                                        2. Olga
                                                                                                                                          Olga30 августа 2018, 12:26#
                                                                                                                                          Здравствуйте! Помогите, разобраться!
                                                                                                                                          сладер работает отлично во всех браузерах, кроме IE 11 — по бокам слаедера видны куски следующих картинкок слайда, у меня никак не получается их убрать
                                                                                                                                          1. ывава
                                                                                                                                            ывава16 октября 2018, 16:45#
                                                                                                                                            Отключите centerMode
                                                                                                                                          2. Евгений
                                                                                                                                            Евгений01 сентября 2018, 23:47#
                                                                                                                                            Здравствуйте, подскажите как настроить свайп мышки, чтобы слайдеры галереи перемещались больше чем на один в сторону при использовании свайпа (а то если в слайдере 60 элементов, то листать по одному слайдеру одним свайпом очень долго, хотя сам свайп в начале перелистывает элементов пять в сторону, а когда отпускаешь свайп, происходит откат)
                                                                                                                                            1. Andy Si02 сентября 2018, 00:41#
                                                                                                                                              Только писать свой обработчик свайпов. В слайдере таких тонких настроек нет.
                                                                                                                                              1. Иван IGStudio.by
                                                                                                                                                Иван IGStudio.by14 ноября 2018, 19:54#
                                                                                                                                                Открываете файл slick.js, строчка 79, параметр slidesToScroll: 1,
                                                                                                                                                Меняете на любое подходящее значение.
                                                                                                                                                1. Евгений
                                                                                                                                                  Евгений15 ноября 2018, 08:12#
                                                                                                                                                  Не пойдет, нужна динамика в перемещении (а это статичный параметр), в зависимости от силы свайпа (1 или 5 перемещений в сторону или сколько угодно)
                                                                                                                                              2. эд
                                                                                                                                                эд06 декабря 2018, 11:44#
                                                                                                                                                добрый день, уточните пожалуйста можно ли вставить в данный слайдер видео (с ютуба)
                                                                                                                                                1. Andy Si06 декабря 2018, 12:33#
                                                                                                                                                  Можно.
                                                                                                                                                2. Тимофей
                                                                                                                                                  Тимофей01 марта 2019, 07:44#
                                                                                                                                                  Привет, установил слайдер. Всё работает — Отлично. показываю по 4 фото, листаю по 1. У меня почему-то резкость (Фокус) на первой фото, остальный как размыты. Как сделать чтобы все показывались четко? Спасибо
                                                                                                                                                  1. Andy Si01 марта 2019, 09:08#
                                                                                                                                                    Привет… в плагине нет настроек, связанных с размытием. Либо сторонними стилями размывается, либо проблемы в фото.
                                                                                                                                                  2. Тимофей
                                                                                                                                                    Тимофей01 марта 2019, 11:10#
                                                                                                                                                    Спасибо за ответ Андрей, разобрался. В стилях был прописано opacity
                                                                                                                                                    1. Stas
                                                                                                                                                      Stas02 апреля 2019, 18:26#
                                                                                                                                                      не работает с jquery 3.x (
                                                                                                                                                      1. Вероника
                                                                                                                                                        Вероника20 апреля 2019, 10:13#
                                                                                                                                                        Здравствуйте!
                                                                                                                                                        Помогите решить проблему…
                                                                                                                                                        В настройках стоит:
                                                                                                                                                        infinite: true,
                                                                                                                                                          slidesToShow: 5,
                                                                                                                                                          slidesToScroll: 5,
                                                                                                                                                          dots:true,
                                                                                                                                                        Всё отлично работает! Но мне очень надо поставить centerMode: true
                                                                                                                                                        Как только поставлю, то все слайды «слипаются», то есть без зазора! Подскажите что поправить надо чтоб было как без centerMode: true
                                                                                                                                                        И ещё проблема с центрированием, почему листает только по одному слайду, ну и дотов выводить соответсвенно, хотя в настройках указанно slidesToScroll: 5 Как сделать чтоб листал по 5 слайдов?
                                                                                                                                                        1. Andy Si20 апреля 2019, 11:08#
                                                                                                                                                          Добрый день.

                                                                                                                                                          Слипаются, видимо, из-за некорректной верстки слайдов. Нужно смотреть и править CSS стилями.

                                                                                                                                                          Режим centerMode, к сожалению, игнорирует параметр slidesToScroll. Исправить это никак нельзя, только писать свой обработчик событий на нажатие кнопок. Смотреть в сторону методов.
                                                                                                                                                        2. Вероника
                                                                                                                                                          Вероника20 апреля 2019, 11:41#
                                                                                                                                                          Слипаются, видимо, из-за некорректной верстки слайдов. Нужно смотреть и править CSS стилями.
                                                                                                                                                          А не подскажите какую секцию CSS смотреть надо? Я в этом плохо понимаю… Просто без centerMode всё правильно работает почему то…
                                                                                                                                                          1. Andy Si20 апреля 2019, 12:18#
                                                                                                                                                            Надо на боевом сайте смотреть, неизвестно из-за чего конкретно у вас слипается. У меня в примере не слипается, стоит по-умолчанию для
                                                                                                                                                            .slider .slick-list .slick-slide { margin: 0 2px; }
                                                                                                                                                            в файле slick-theme.css
                                                                                                                                                            1. Valer4
                                                                                                                                                              Valer414 мая 2019, 22:25#
                                                                                                                                                              'centerPadding' => '0px'
                                                                                                                                                            2. Сергей
                                                                                                                                                              Сергей22 октября 2019, 10:54#
                                                                                                                                                              Здравствуйте. В слайдере 4 картинки и 1 видео. Нужно что бы слайд с видео имел другое время прокрутки/задержки, как это сделать? Спасибо.
                                                                                                                                                              1. Andy Si22 октября 2019, 12:04#
                                                                                                                                                                Добрый день. Из коробки никак. Нужно писать js код — использовать событие afterChange и в нем проверять какой слайд в данный момент активен. Если с видео, то вызываем метод slickPause и по setTimeout вешаем выполнение метода — slickPrev. Описание этих методов и свойств есть в статье.
                                                                                                                                                                1. Сергей
                                                                                                                                                                  Сергей22 октября 2019, 12:39#
                                                                                                                                                                  Спасибо за ответ и оперативность. Код примерно такой?)
                                                                                                                                                                  $('.slick-slider').on('afterChange', function(event, slick, currentSlide){
                                                                                                                                                                    if (currentSlide == 5) {('slickPause: 16000'); }
                                                                                                                                                                  });
                                                                                                                                                                  
                                                                                                                                                                  1. Andy Si22 октября 2019, 12:46#
                                                                                                                                                                    Почти, вот так наверно:
                                                                                                                                                                    $('.slick-slider').on('afterChange', function(event, slick, currentSlide){
                                                                                                                                                                      if (currentSlide == 5) {
                                                                                                                                                                        $('.slick-slider').slick('slickPause');
                                                                                                                                                                        setTimeout(function(){
                                                                                                                                                                            $('.slick-slider').slick('slickPlay');
                                                                                                                                                                        }, 16000)
                                                                                                                                                                      }
                                                                                                                                                                    });
                                                                                                                                                                    
                                                                                                                                                                    Если методы паузы и возобновления автопрокрутки не сработают, то попробуй заменить на:

                                                                                                                                                                    $('.slick-slider').slickPlay();
                                                                                                                                                                    $('.slick-slider').slickPause();
                                                                                                                                                                    
                                                                                                                                                                    1. Сергей
                                                                                                                                                                      Сергей22 октября 2019, 15:35#
                                                                                                                                                                      Спасибо, но пока что не помогло…
                                                                                                                                                              2. Илья
                                                                                                                                                                Илья23 октября 2019, 11:33(был изменён)#
                                                                                                                                                                Подскажите пожалуйста почему не работает слайдер если выкладываю сайт на https://app.netlify.com, ссылки на slick.js вроде абсолютные.
                                                                                                                                                                1. Andy Si24 октября 2019, 19:17#
                                                                                                                                                                  Не знаком с этим сервисом, стоит смотреть консольные логи.
                                                                                                                                                                2. Алексей
                                                                                                                                                                  Алексей07 ноября 2019, 11:35#
                                                                                                                                                                  Здравствуйте.
                                                                                                                                                                  События Slick slider.
                                                                                                                                                                  У меня всего 5 слайдов. Мне нужно чтоб после каждого перелистывания слайда задавался определенный класс диву.
                                                                                                                                                                  Код сработал, но проблема что он раз сработал и повторно не хочет. Мне нужно его зациклить. Помогите пожалуйста!
                                                                                                                                                                  Вот код:
                                                                                                                                                                  $(function () {
                                                                                                                                                                       $('.req_slider').on('afterChange', function(event, slick, currentSlide){
                                                                                                                                                                           if (currentSlide == 0) { $(".ttt div").addClass('active0'); }
                                                                                                                                                                       });
                                                                                                                                                                  
                                                                                                                                                                       $('.req_slider').on('afterChange', function(event, slick, currentSlide){
                                                                                                                                                                           if (currentSlide == 1) { $(".ttt div").addClass('active1'); }
                                                                                                                                                                       });
                                                                                                                                                                  
                                                                                                                                                                       $('.req_slider').on('afterChange', function(event, slick, currentSlide){
                                                                                                                                                                           if (currentSlide == 2) { $(".ttt div").addClass('active2'); }
                                                                                                                                                                       });
                                                                                                                                                                  
                                                                                                                                                                       $('.req_slider').on('afterChange', function(event, slick, currentSlide){
                                                                                                                                                                           if (currentSlide == 3) { $(".ttt div").addClass('active3'); }
                                                                                                                                                                       });
                                                                                                                                                                  
                                                                                                                                                                       $('.req_slider').on('afterChange', function(event, slick, currentSlide){
                                                                                                                                                                           if (currentSlide == 4) { $(".ttt div").addClass('active4'); }
                                                                                                                                                                       });
                                                                                                                                                                   });
                                                                                                                                                                  
                                                                                                                                                                  1. Andy Si07 ноября 2019, 11:55(был изменён)#
                                                                                                                                                                    Всё это упрощается до такой конструкции:
                                                                                                                                                                    $(function () {
                                                                                                                                                                         $('.req_slider').on('afterChange', function(event, slick, currentSlide){
                                                                                                                                                                             $(".ttt div").addClass('active' + currentSlide);
                                                                                                                                                                         });
                                                                                                                                                                    });
                                                                                                                                                                    А вообще что-то делаете не так. Прежде чем добавить класс, нужно другие удалить, иначе это не будет нормально работать.

                                                                                                                                                                    Или писать так:
                                                                                                                                                                    $(function () {
                                                                                                                                                                         $('.req_slider').on('afterChange', function(event, slick, currentSlide){
                                                                                                                                                                             $(".ttt div").attr('class', 'active' + currentSlide);
                                                                                                                                                                         });
                                                                                                                                                                    });
                                                                                                                                                                    1. Алексей
                                                                                                                                                                      Алексей07 ноября 2019, 12:00(был изменён)#
                                                                                                                                                                      Но мне нужен разный класс на определенном слайде!
                                                                                                                                                                      На первом слайде нужен класс active0, на втором active1, на третьем active2 и т.д
                                                                                                                                                                      1. Andy Si07 ноября 2019, 12:03#
                                                                                                                                                                        Код внимательно посмотри — переменная currentSlide меняется в зависимости от слайда.
                                                                                                                                                                        1. Алексей
                                                                                                                                                                          Алексей07 ноября 2019, 12:28#
                                                                                                                                                                          Скажите, что я должен подставлять здесь:
                                                                                                                                                                          .attr('class', 'active' + currentSlide);

                                                                                                                                                                          'active' — это мой класс, как я понимаю. А сюда 'class' что?
                                                                                                                                                                          1. Andy Si07 ноября 2019, 12:33#
                                                                                                                                                                            Ничего не должен подставлять. Эта строка буквально значит — при перелистывании слайдера у селектора .ttt div устанавливаем класс active + номер текущего слайда. Фактически, если текущий слайд 3, то установится класс — active3.
                                                                                                                                                                            1. Алексей
                                                                                                                                                                              Алексей07 ноября 2019, 17:38#
                                                                                                                                                                              Спасибо огромное. Все работает!
                                                                                                                                                                              Если вам не сложно, подскажите.
                                                                                                                                                                              Мне ещё нужно чтоб при появлении первого слайда — на один div цеплялся класс и перед появлением второго слайда этот класс убирался, при появлении второго слайда — на второй div цеплялся тот же класс и убирался перед появлением третьего слайда и т.д.
                                                                                                                                                                              1. Andy Si07 ноября 2019, 23:05#
                                                                                                                                                                                Всё то-же самое — использовать afterChange. Для добавления класса addClass, для удаления — removeClass.
                                                                                                                                                                  2. Алексей
                                                                                                                                                                    Алексей07 ноября 2019, 12:43#
                                                                                                                                                                    Ёпчик, ЗАРАБОТАЛО!!!
                                                                                                                                                                    Очень быстро отвечаете, спасибо огромное!
                                                                                                                                                                    1. Руслан
                                                                                                                                                                      Руслан07 ноября 2019, 19:20#
                                                                                                                                                                      Добрый день! Прошу помочь решить такую задачу: как лучше реализовать отбор в slick-slider. Есть 50 слайдов, при нажатии на btn1 — запускаются 1-10 слайд, на btn2 — 11-20 слайд и т.д. Заранее спасибо.
                                                                                                                                                                      1. Andy Si07 ноября 2019, 22:53#
                                                                                                                                                                        Добрый… Из коробки это не сделать. Нужно писать js обработчик нажатия и в событии beforeChange. Ищите программиста.
                                                                                                                                                                        1. Руслан
                                                                                                                                                                          Руслан11 ноября 2019, 18:01#
                                                                                                                                                                          может кому поможет через data-filter https://codepen.io/chiz-developer/pen/ybxBKy + сам я реализовал по этой схеме https://codepen.io/devrom/pen/boqaoZ
                                                                                                                                                                          1. Andy Si11 ноября 2019, 22:10#
                                                                                                                                                                            Супер!
                                                                                                                                                                      2. Артём Измайлов
                                                                                                                                                                        Артём Измайлов05 декабря 2019, 12:03#
                                                                                                                                                                        Здравствуйте.

                                                                                                                                                                        Уже замучился, не знаю как решить, может Вы что подскажете.

                                                                                                                                                                        Если файлы css и js подключать как в статье, то всё норм. только гугл спид инсайт показывает к-во балов 30 (очень мало).

                                                                                                                                                                        Если файлы подключать асинхронно, скриптами. То показатель почти 60, что вполне сносно. Но появляется проблема. Если мы переходим с другой страницы, на страницу с указанием id (realadmin.ru/#my-id), а id расположен далеко за слайдером, то за счёт того что css и js не успевают прогрузиться, слайдер в высоту занимает кучу места, а к моменту перехода он уже собирается, но отображаемый контент уже не тот.
                                                                                                                                                                        1. Andy Si05 декабря 2019, 15:25#
                                                                                                                                                                          Советую не обращать внимание на оценку GPI, она ни на что не влияет и показывает не скорость загрузки, а возможности по улучшению скорости отображения страницы. Другими словами, быстрый сайт может иметь плохую оценку, а медленный — хорошую.

                                                                                                                                                                          Но если уж приспичило, попробуй вызов слайдера делать по событию window.onload или вообще по settimeout. Больше ничего не посоветую.
                                                                                                                                                                          1. Артём Измайлов
                                                                                                                                                                            Артём Измайлов05 декабря 2019, 20:32#
                                                                                                                                                                            Спасибо, так и поступлю, забью)
                                                                                                                                                                        2. Андрей
                                                                                                                                                                          Андрей09 декабря 2019, 18:44#
                                                                                                                                                                          Доброго времени суток всем!
                                                                                                                                                                          Подскажите, пожалуйста, если картинка прописана не тегом , а через фоновую картинку,
                                                                                                                                                                          style="background: url(images/main-slider3.jpg);
                                                                                                                                                                          , то как правильно прописать отложенную загрузку
                                                                                                                                                                          Вариант, для фрагмента настроек в скрипте,
                                                                                                                                                                          lazyLoad: 'ondemand'
                                                                                                                                                                          , не срабатывает, судя по вкладке NETWORK в разработчике. Грузит сразу все три картинки.
                                                                                                                                                                          Дата атрибут тоже не вариант, судя по всему.

                                                                                                                                                                          Заранее спасибо за внимание.
                                                                                                                                                                          1. Andy Si09 декабря 2019, 21:04(был изменён)#
                                                                                                                                                                            Доброго… стандартными средствами никак.
                                                                                                                                                                            Для ленивой загрузки фоновых изображений можно только костыльнуть и написать что-то такое:
                                                                                                                                                                            data-background="url(images/main-slider3.jpg)"
                                                                                                                                                                            
                                                                                                                                                                            И написать небольшой скрипт, который будет при пролистывании применять этот фон к активному слайду.
                                                                                                                                                                          2. Андрей
                                                                                                                                                                            Андрей09 декабря 2019, 22:38#
                                                                                                                                                                            Спасибо за оперативный ответ!… В скриптах не силён. Я пробовал
                                                                                                                                                                            data-bg="url(images/main-slider3.jpg)"
                                                                                                                                                                            с отдельным скриптом Lazy load, и он тоже не работает… на старте страницы сразу три слайда грузит, слайдер в шапке. Для других блоков, что идут потом ниже, для фоновых изображений в этих блоках, не слайдерах — работает, а вот именно для слайдера в шапке, сразу три слайда всегда грузит. Я понимаю что они (разные скрипты Lazy load) по активному вивпорту работают, и потому что все эти три слайда занимают место в шапке, грузит сразу все три, без учёта что это слайдер.

                                                                                                                                                                            В любом случае спасибо за внимание и ответ!
                                                                                                                                                                            1. Сергей
                                                                                                                                                                              Сергей17 декабря 2019, 23:13(был изменён)#
                                                                                                                                                                              Здравствуйте, возникла проблема с подключением плагина, все сделал по инструкции но почему то он не подключается.
                                                                                                                                                                              Вот пример:
                                                                                                                                                                              $('.slider__inner').slick();
                                                                                                                                                                              1. Andy Si18 декабря 2019, 09:04#
                                                                                                                                                                                Добрый день.

                                                                                                                                                                                Во-первых, пути подключения плагина и jQuery проверяй. Надо использовать абсолютные пути, а не относительные. То есть, от корня сайта.

                                                                                                                                                                                Во-вторых, есть вероятность что jQuery отрабатывает после вызова slick. Пробуй обернуть так:
                                                                                                                                                                                $(function(){
                                                                                                                                                                                	$('.slider__inner').slick();
                                                                                                                                                                                });
                                                                                                                                                                                В-третьих, смотри ошибки в браузерной консоли.
                                                                                                                                                                              2. Евгений
                                                                                                                                                                                Евгений15 января 2020, 20:01#
                                                                                                                                                                                Здравствуйте! Подскажите, пожалуйста. Столкнулся со следующей проблемой: breakpoint: 900 не срабатывает,
                                                                                                                                                                                responsive: [
                                                                                                                                                                                      {
                                                                                                                                                                                        breakpoint: 1210,
                                                                                                                                                                                        settings: {
                                                                                                                                                                                          slidesToShow: 3
                                                                                                                                                                                        }
                                                                                                                                                                                      },
                                                                                                                                                                                      {
                                                                                                                                                                                        breakpoint: 900,
                                                                                                                                                                                        settings: {
                                                                                                                                                                                          slidesToShow: 2
                                                                                                                                                                                        }
                                                                                                                                                                                      }
                                                                                                                                                                                    ]
                                                                                                                                                                                причем в отладчике заметил странную вещь классу slick-track автоматом добавляются свойства
                                                                                                                                                                                element.style {
                                                                                                                                                                                    opacity: 1;
                                                                                                                                                                                    width: 5833px;
                                                                                                                                                                                    transform: translate3d(-2763px, 0px, 0px);
                                                                                                                                                                                если убрать width и transform то работает как надо
                                                                                                                                                                                1. Andy Si15 января 2020, 22:10#
                                                                                                                                                                                  Добрый вечер.
                                                                                                                                                                                  Вот только на 900 не работает? Почти уверен что проблема скорее в верстке самого сайта. Например, автоширина области контента на этом разрешении или что-то вроде этого.
                                                                                                                                                                                  1. Евгений
                                                                                                                                                                                    Евгений15 января 2020, 22:14#
                                                                                                                                                                                    900 — первое, где появилась проблема, а по сути вы правы, не работает от 1000 и ниже. Спасибо за подсказку, просмотрю еще раз верстку
                                                                                                                                                                                2. Андрей
                                                                                                                                                                                  Андрей23 января 2020, 22:00#
                                                                                                                                                                                  Здравствуйте! При уменьшении разрешения количество слайдов должно уменьшаться, пытаюсь через css @media убрать ненужные картинки — слайдер игнорирует стили и грузит всё, что прописано в html. Есть ли решение? Спасибо!
                                                                                                                                                                                  1. Andy Si24 января 2020, 14:42#
                                                                                                                                                                                    Используй responsive для изменения кол-ва слайдов на разных разрешениях. В статье про это написано.
                                                                                                                                                                                    1. Андрей
                                                                                                                                                                                      Андрей24 января 2020, 15:38#
                                                                                                                                                                                      Спасибо большое! Но проблема в другом — нужно вообще убрать часть слайдов на меньших разрешениях. Допустим на больших разрешениях у меня 10 картинок, а в мобильной версии только 5. display: none у классов слайдов не срабатывают…
                                                                                                                                                                                      1. Andy Si24 января 2020, 16:53#
                                                                                                                                                                                        Ясно… попробуй
                                                                                                                                                                                        display: none !important;
                                                                                                                                                                                        Если не поможет, то видимо по простому не сделать. Только скрипт писать, в котором отслеживать изменение ширины и фильтровать слайды. Есть такой функционал, например, чтобы отобразить только нечетные слайды можно выполнить что-то вроде этого:
                                                                                                                                                                                        $('.filtering').slick('slickFilter',':even');
                                                                                                                                                                                        Это пример из официальной документации.
                                                                                                                                                                                        1. Андрей
                                                                                                                                                                                          Андрей24 января 2020, 22:01#
                                                                                                                                                                                          Спасибо, буду пробовать!
                                                                                                                                                                                  2. Владимир
                                                                                                                                                                                    Владимир31 января 2020, 17:42#
                                                                                                                                                                                    Добрый вечер.
                                                                                                                                                                                    Можно ли как то создать интерактив в слайдах? Например, ссылку, с ховером, переходом, как обчно. Там все наслаивается друг на друга и ссылка видна, но не интерактивна
                                                                                                                                                                                    1. Andy Si31 января 2020, 23:07#
                                                                                                                                                                                      Можно, нужно отключить перелистывание слайдера свайпом:
                                                                                                                                                                                      draggable: false
                                                                                                                                                                                    2. 0reh
                                                                                                                                                                                      0reh29 февраля 2020, 20:17(был изменён)#
                                                                                                                                                                                      Здравствуйте.

                                                                                                                                                                                      Есть такой код:

                                                                                                                                                                                      Три рамки расположены через флекс, далее поверх рамок наложены иные изображения.
                                                                                                                                                                                      Пытаюсь это все обернуть в слайдер таким образом, чтобы по свайпу листались
                                                                                                                                                                                      изображения с рамками, а внизу через точки переключались изображения с рамками

                                                                                                                                                                                      <div class="slick-slider-team">
                                                                                                                                                                                      	<img src="#" alt="" class="black-frame1">
                                                                                                                                                                                              <img src="#" alt="" class="black-frame2">
                                                                                                                                                                                              <img src="#" alt="" class="black-frame3">
                                                                                                                                                                                              <img src="#" alt="" class="slick-slider-team-img1">
                                                                                                                                                                                              <img src="#" alt="" class="slick-slider-team-img2">
                                                                                                                                                                                              <img src="#" alt="" class="slick-slider-team-img3">
                                                                                                                                                                                      </div>
                                                                                                                                                                                      
                                                                                                                                                                                      как правильно это сделать?
                                                                                                                                                                                      1. Andy Si01 марта 2020, 18:19#
                                                                                                                                                                                        Добрый день.
                                                                                                                                                                                        По мне, так рамки надо делать с помощью псевдоклассов before/after.
                                                                                                                                                                                      2. Ирина
                                                                                                                                                                                        Ирина05 марта 2020, 17:56(был изменён)#
                                                                                                                                                                                        Здравствуйте. Проблема со свайпом. touchThreshold уже зашкаливает, а слайды еле движутся, притом пролистывает по одному вместо указанных

                                                                                                                                                                                        function initSliderItems(sliderId) {
                                                                                                                                                                                        	$(sliderId).slick({
                                                                                                                                                                                        		slidesToShow: 6,
                                                                                                                                                                                        		slidesToScroll: 6,
                                                                                                                                                                                        		arrows: true,
                                                                                                                                                                                        		touchThreshold: 10000,
                                                                                                                                                                                        		dots: false,
                                                                                                                                                                                        		variableWidth: true,
                                                                                                                                                                                        		infinite: true,
                                                                                                                                                                                        		adaptiveHeight:false,
                                                                                                                                                                                        		responsive: [
                                                                                                                                                                                        			{
                                                                                                                                                                                        				breakpoint: 1024,
                                                                                                                                                                                        				settings: {
                                                                                                                                                                                        					slidesToShow: 5,
                                                                                                                                                                                        					slidesToScroll: 5
                                                                                                                                                                                        				}
                                                                                                                                                                                        			},
                                                                                                                                                                                        			{
                                                                                                                                                                                        				breakpoint: 640,
                                                                                                                                                                                        				settings: {
                                                                                                                                                                                        					slidesToShow: 3,
                                                                                                                                                                                        					slidesToScroll: 3
                                                                                                                                                                                        				}
                                                                                                                                                                                        			}
                                                                                                                                                                                        		]
                                                                                                                                                                                        	});
                                                                                                                                                                                        }
                                                                                                                                                                                        1. Andy Si10 марта 2020, 09:28#
                                                                                                                                                                                          Добрый день. Дело явно не в этом параметре. Смотрите на сами слайды, может они сильно перегружены элементами и объемными изображениями.
                                                                                                                                                                                        2. Михаил
                                                                                                                                                                                          Михаил27 апреля 2020, 11:22(был изменён)#
                                                                                                                                                                                          Здравствуйте. Появилься проблема. Нужно ваша помошь. Написаль такой код для слайдера. slidesToShow я сделал 4. Но если добавляю 3 товара у меня отображение товаров ламается https://o525.ru/ytR1e3ta32i_e8uCs-BROmo8ul4 Можете помощь пжл.
                                                                                                                                                                                          $mainBlocks.each(function() {
                                                                                                                                                                                          	    		$(this).slick({
                                                                                                                                                                                          					dots: false,
                                                                                                                                                                                          					arrows: true,
                                                                                                                                                                                          					infinite: true,
                                                                                                                                                                                          					speed: 400,
                                                                                                                                                                                          					fade: false,
                                                                                                                                                                                          	  				cssEase: 'linear',
                                                                                                                                                                                          					autoplay: false,
                                                                                                                                                                                          					draggable: false,
                                                                                                                                                                                          					slidesToShow: 4,
                                                                                                                                                                                          					slidesToScroll: 1,
                                                                                                                                                                                          					responsive: [
                                                                                                                                                                                          					{
                                                                                                                                                                                          						breakpoint: 1400,
                                                                                                                                                                                          						settings: {
                                                                                                                                                                                          							slidesToShow: 3,
                                                                                                                                                                                          							slidesToScroll: 1
                                                                                                                                                                                          						}
                                                                                                                                                                                          					},
                                                                                                                                                                                          					{
                                                                                                                                                                                          						breakpoint: 1075,
                                                                                                                                                                                          							settings: {
                                                                                                                                                                                          							slidesToShow: 2,
                                                                                                                                                                                          							slidesToScroll: 1
                                                                                                                                                                                          						}
                                                                                                                                                                                          					},
                                                                                                                                                                                          					{
                                                                                                                                                                                          						breakpoint: 561,
                                                                                                                                                                                          							settings: {
                                                                                                                                                                                          							slidesToShow: 1,
                                                                                                                                                                                          							slidesToScroll: 1
                                                                                                                                                                                          						}
                                                                                                                                                                                          					}
                                                                                                                                                                                          					]
                                                                                                                                                                                          				});
                                                                                                                                                                                          		    });
                                                                                                                                                                                          
                                                                                                                                                                                          
                                                                                                                                                                                          1. Andy Si27 апреля 2020, 12:36#
                                                                                                                                                                                            У вас что-то с вёрсткой не так. Слайдер тут ни при чем. Попробуй width блокам слайдера задать.
                                                                                                                                                                                          2. Enot
                                                                                                                                                                                            Enot19 мая 2020, 11:49#
                                                                                                                                                                                            Во-первых очень приятно за то что у Вас здесь крайне живой ресурс ( судя по оперативным ответам ). Сейчас такое редко встретишь, чаще выкладываю материал и уходят в закат.
                                                                                                                                                                                            По делу:
                                                                                                                                                                                            Имею вот такой ресурс http://eratest.mcdir.ru/cases/novogodnee-korporativnoe-meropriyatie/ у него на детальной странице слайдер с .slider-for. И тот слайдер что .slider-for ( боковой горизонтальный ) должен всегда отображать минимум 5 превью изображений. Даже если из админки их всего 2. slidesToShow: 4 & infinite: true проблему не решают. Нужно писать свой код по типу проверки на lenght < 5 или есть что-то коробочное?
                                                                                                                                                                                            Спасибо.
                                                                                                                                                                                            П.С. Если есть возможность — благодарен буду за пример клонирования при lenght < 5. Только второй месяц на JS.
                                                                                                                                                                                            1. Enot
                                                                                                                                                                                              Enot19 мая 2020, 12:08#
                                                                                                                                                                                              что-то вроде такого написал:
                                                                                                                                                                                              if($('.main-case_list').length < 5) {
                                                                                                                                                                                              $('.main-case_list .main-case_wrapp').clone().appendTo('.main-case_list');
                                                                                                                                                                                              } else {
                                                                                                                                                                                              console.log(' больше 5 ')
                                                                                                                                                                                              }
                                                                                                                                                                                              Но оно повторяет итерацию 1 раз. Видимо еще нужно делать проверку-итерацию i++. Чтобы условие выполнялось пока не удовлетворит.
                                                                                                                                                                                              1. Andy Si20 мая 2020, 09:09(был изменён)#
                                                                                                                                                                                                Добрый день, к сожалению, нет времени разобраться, но вы в правильном направлении мыслите. Можно таким образом, только внутри добавить цикл:
                                                                                                                                                                                                while ($('.main-case_list').length < 5) {
                                                                                                                                                                                                  $('.main-case_list .main-case_wrapp').clone().appendTo('.main-case_list');
                                                                                                                                                                                                }
                                                                                                                                                                                            2. Данияр
                                                                                                                                                                                              Данияр01 июля 2020, 07:28#
                                                                                                                                                                                              Доброго времени суток, подскажите плиз кто знает. Создал фулскриновый вертикальный слайдер, всё работает) Последний блок хочу сделать горизонтальным слайдером, в панели разработчика видно что оба слайдера работают, но горизонтальным слайдер не отображается
                                                                                                                                                                                              1. Andy Si01 июля 2020, 12:01#
                                                                                                                                                                                                Добрый день… так вряд кто-то подскажет… не совсем понятно как это в реале выглядит.
                                                                                                                                                                                              2. Oleg
                                                                                                                                                                                                Oleg06 августа 2020, 13:27#
                                                                                                                                                                                                Добрый день! Есть двойной слайдер, нужно сделать так, чтоб первое изображение в слайдере-навигаторе не было видно, пока не начнешь скролить соответственно сам слайдер.
                                                                                                                                                                                                То есть грубо говоря, есть ли возможность чтоб на главном слайдере было первое изображение, но во второстепенном его не было видно изначально и все работало как надо. для слайдера навигатора добавлена настройка centerMode
                                                                                                                                                                                                1. Andy Si06 августа 2020, 16:03#
                                                                                                                                                                                                  Добрый день. Задача специфическая, из коробки такого решения нет. Придется что-то дописывать стилями и js событиями слайдера.
                                                                                                                                                                                                2. Elena G
                                                                                                                                                                                                  Elena G15 ноября 2020, 21:19(был изменён)#
                                                                                                                                                                                                  Сделала все с нуля в чистом проекте — работает как надо — 2 слайдера — миникартинки управляют большими по клику.

                                                                                                                                                                                                  Начала переносить в проект и все слетело и со стилями, и с расположением. Уже второй день сижу и не могу даже заставить в инструментах разработчика установить как надо. Первый вопрос — это слайд первый только стоит верно, все остальные при клике уходят в минус совсем. Вижу, что при инициализации у них почему то у всех left становится -686px, а дальше у всех увеличивается в 2 раза соответственно: -1372px и -2058px.

                                                                                                                                                                                                  Как заставить их появляться правильно?

                                                                                                                                                                                                  И второй вопрос — второй слайдер раньше был внизу горизонтально, сейчас уехал под футер и стал вертикальным. В консоли куча классов появляется от слайдера и как я не пытаюсь — ни один не дает ничего сделать. Если бы я не написала на чистом листе и все не проверила — помогите советом!!!
                                                                                                                                                                                                  1. Andy Si16 ноября 2020, 09:32#
                                                                                                                                                                                                    Что-то не так с вёрсткой в проекте, поэтому всё едет. Какие-то позиционирования блоков выставлены неверно — свойство float может к каким-то блокам неправильно применяется. А может и в стилях, которые применяете к слайдеру что-то не так. Не видя проекта сложно чем-то помочь.
                                                                                                                                                                                                  2. Александр
                                                                                                                                                                                                    Александр28 ноября 2020, 08:04#
                                                                                                                                                                                                    Доброго времени
                                                                                                                                                                                                    Помогите разобраться, уже весь гугл затер до дыр — решения не нашел.

                                                                                                                                                                                                    Есть слайдер с такими настройками:
                                                                                                                                                                                                    jQuery('').slick({
                                                                                                                                                                                                        infinite: false,
                                                                                                                                                                                                        draggable: true,
                                                                                                                                                                                                        slidesToShow: 4,
                                                                                                                                                                                                        slidesToScroll: 1,
                                                                                                                                                                                                        autoplay:false
                                                                                                                                                                                                    });
                                                                                                                                                                                                    
                                                                                                                                                                                                    Как видно перелистывание по одному слайду, но при перетаскивании слайдов с помощью курсора мышки происходит сдвиг на один слайд, а не на насколько сильно потянули слайд.

                                                                                                                                                                                                    Подскажите сделать чтобы при перелистывании слайдов с помощью кнопок было по одну, а когда с помощью курсора мышки на столько слайдов на насколько сильно потянули слайд.

                                                                                                                                                                                                    За ранее спасибо!!!
                                                                                                                                                                                                    1. Andy Si28 ноября 2020, 18:01#
                                                                                                                                                                                                      Добрый день.

                                                                                                                                                                                                      К сожалению, сам слайдер так устроен. Поэтому, только 2 варианта — искать другой jQuery плагин, который может это из коробки, ну либо как-то дорабатывать slick. Первый вариант, наверно, будет проще.
                                                                                                                                                                                                      1. Александр
                                                                                                                                                                                                        Александр29 ноября 2020, 02:30#
                                                                                                                                                                                                        Спасибо!
                                                                                                                                                                                                        А если дорабатывать не подскажите куда копать?
                                                                                                                                                                                                        1. Andy Si29 ноября 2020, 11:23#
                                                                                                                                                                                                          Искать обработчики, которые срабатывают при листании и пытаться на них как-то воздействовать. Но это долго можно разбираться, по мне лучше поискать аналог с уже готовым функционалом.
                                                                                                                                                                                                    2. Алексей Убейкин
                                                                                                                                                                                                      Алексей Убейкин10 декабря 2020, 14:02#
                                                                                                                                                                                                      Скажите пожалуйста в этом плагине можно свайпать слайдер на телефоне?
                                                                                                                                                                                                      1. Andy Si10 декабря 2020, 15:15#
                                                                                                                                                                                                        Да, конечно…
                                                                                                                                                                                                      2. Андрей
                                                                                                                                                                                                        Андрей25 декабря 2020, 18:31#
                                                                                                                                                                                                        Добрый день, у меня почему-то на мобильном слайдер растягивается далеко за границы экрана, если не указать фиксированную ширину. Ширина 100% не помогает.
                                                                                                                                                                                                        Можно как-то адаптировать без фиксированного width?
                                                                                                                                                                                                        1. Andy Si27 декабря 2020, 19:18#
                                                                                                                                                                                                          Добрый день.
                                                                                                                                                                                                          Значит что-то с мобильной вёрсткой не так. Смотри на ширину контейнера на мобильном разрешении — что-то с ним не так.
                                                                                                                                                                                                        2. Олег
                                                                                                                                                                                                          Олег19 января 2021, 17:14#
                                                                                                                                                                                                          Добрый день
                                                                                                                                                                                                          Использую синхронизацию слайдеров в галерее. Отдин слайдер для отображения с оним слайдом и стрелками второй для навигации вертикальный с несколькими слайдами. Как реализовать условие чтоб кода в слайдере навигации слайдов менше чем определенное количество (требуемое чтоб заполнить панели целиком) они не прокручивались при нажалии на стрелки в первом слайдере.
                                                                                                                                                                                                          У меня слайдер с такими настройками:
                                                                                                                                                                                                          $('.slider-for').slick({
                                                                                                                                                                                                                          slidesToShow: 1,
                                                                                                                                                                                                                          slidesToScroll: 1,
                                                                                                                                                                                                                          arrows: true,
                                                                                                                                                                                                                          speed: 500,
                                                                                                                                                                                                                          fade: true,
                                                                                                                                                                                                                          cssEase: 'linear',
                                                                                                                                                                                                                          swipeToSlide: true,
                                                                                                                                                                                                                          waitForAnimate: false,
                                                                                                                                                                                                                          infinite: true,
                                                                                                                                                                                                                          asNavFor: '.slider-nav',
                                                                                                                                                                                                                          accessibility: true,
                                                                                                                                                                                                                          draggable: true
                                                                                                                                                                                                                      });
                                                                                                                                                                                                                      $('.slider-nav').slick({
                                                                                                                                                                                                                          slidesToShow: 6,
                                                                                                                                                                                                                          slidesToScroll: 1,
                                                                                                                                                                                                                          asNavFor: '.slider-for',
                                                                                                                                                                                                                          dots: false,
                                                                                                                                                                                                                          centerMode: true,
                                                                                                                                                                                                                          vertical: true,
                                                                                                                                                                                                                          infinite: true,
                                                                                                                                                                                                                          verticalSwiping: true,
                                                                                                                                                                                                                          arrows: false,
                                                                                                                                                                                                                          focusOnSelect: true,
                                                                                                                                                                                                                          lazyLoad: 'ondemand'
                                                                                                                                                                                                                      });
                                                                                                                                                                                                          1. Andy Si19 января 2021, 18:06(был изменён)#
                                                                                                                                                                                                            Добрый день… у меня нет готвого примера. Используй событие beforeChange, для навигационного слайдера. Внутри него проверяй кол-во слайдов и если оно меньше какого-то числа, то возвращай return false. Должно сработать.

                                                                                                                                                                                                            Ещё как вариант, на чистом js сделать подсчет слайдов и скрытие стрелок.
                                                                                                                                                                                                            1. Олег
                                                                                                                                                                                                              Олег19 января 2021, 18:55#
                                                                                                                                                                                                              а какой параметр запрещает прокрутку?
                                                                                                                                                                                                              1. Andy Si19 января 2021, 21:28#
                                                                                                                                                                                                                А оказывается нет такого параметра. Почитал обсуждения доработок слайдера и похоже что его слик больше не будет развиваться и новых версий не выйдет.

                                                                                                                                                                                                                Нашел на просторах такой кусок кода, возможно пригодится:
                                                                                                                                                                                                                $slickSlider.on('afterChange', function(e, slick) {
                                                                                                                                                                                                                  if ( LOGICAL CONDITION ) {
                                                                                                                                                                                                                    slick.slickPrev();
                                                                                                                                                                                                                  }
                                                                                                                                                                                                                });
                                                                                                                                                                                                                Дурацкое решение, типа если какое-то условие есть, то прокручиваем обратно. Я лично не пробовал, но может и будет работать.
                                                                                                                                                                                                          2. islam
                                                                                                                                                                                                            islam26 января 2021, 09:50#
                                                                                                                                                                                                            Добрый день
                                                                                                                                                                                                            Можете подсказать почему не появляются стрелки в slick?
                                                                                                                                                                                                            1. Andy Si26 января 2021, 10:21#
                                                                                                                                                                                                              Добрый день. Только если скинешь пример. Скорее всего, что-то не так с вёрсткой.
                                                                                                                                                                                                            2. islam
                                                                                                                                                                                                              islam26 января 2021, 11:52#
                                                                                                                                                                                                              $(function(){
                                                                                                                                                                                                                  $('.fairy-tail__slider').slick({
                                                                                                                                                                                                                      prevArrow: '<button type="button" class="slick-btn slick-prev">​<img 
                                                                                                                                                                                                                      src="img/arrow-prev.svg" alt=""></button>',
                                                                                                                                                                                                                      nextArrow: '<button type="button" class="slick-btn slick-next">​<img 
                                                                                                                                                                                                                      src="img/arrow-next 2.svg" alt=""></button>',
                                                                                                                                                                                                                  });
                                                                                                                                                                                                              });
                                                                                                                                                                                                              
                                                                                                                                                                                                              слайдер вроде работает крутится но нету стрелок!

                                                                                                                                                                                                              1. Andy Si26 января 2021, 13:02#
                                                                                                                                                                                                                Я понял, нужна ссылка на страницу, где не отображаются. По этому коду ничего выяснить нельзя.
                                                                                                                                                                                                              2. islam
                                                                                                                                                                                                                islam26 января 2021, 14:12#
                                                                                                                                                                                                                D:\верстка\mavic2PRO\index.html
                                                                                                                                                                                                                1. Andy Si26 января 2021, 14:35#
                                                                                                                                                                                                                  Если этот слайдер не на сайте, я не смогу посмотреть.
                                                                                                                                                                                                                2. islam
                                                                                                                                                                                                                  islam26 января 2021, 15:55#
                                                                                                                                                                                                                  ну ладно )
                                                                                                                                                                                                                  спосибо!
                                                                                                                                                                                                                  1. Ирина
                                                                                                                                                                                                                    Ирина27 января 2021, 17:09#
                                                                                                                                                                                                                    Добрый день. Подскажите как включить слик слайдер, начиная с брекпоинта 768 и ниже. То есть, чтоб при ширинах экрана больше 768 отображались обычные блоки, а начиная с 768 и до моб версии включительно отображался слайдер. Спасибо.
                                                                                                                                                                                                                    1. Andy Si28 января 2021, 10:55#
                                                                                                                                                                                                                      Добрый. Оберните вызов слайдера в условие:
                                                                                                                                                                                                                      if (screen.width <= 768) {
                                                                                                                                                                                                                      	// вызов slick
                                                                                                                                                                                                                      }
                                                                                                                                                                                                                      
                                                                                                                                                                                                                      1. Ирина
                                                                                                                                                                                                                        Ирина28 января 2021, 13:06#
                                                                                                                                                                                                                        Спасибо)
                                                                                                                                                                                                                      2. Андрей
                                                                                                                                                                                                                        Андрей28 февраля 2021, 19:42#
                                                                                                                                                                                                                        Добрый вечер, подскажите пожалуйста, какой параметр отвечает за паузу слайдера? Он показывает слайд примерно 4-5 секунд, как увеличить это время? Спасибо.
                                                                                                                                                                                                                        1. Andy Si01 марта 2021, 09:46#
                                                                                                                                                                                                                          Добрый день. autoplaySpeed, указывается в миллисекундах и по-умолчанию стоит 3000, что равно 3 сек.
                                                                                                                                                                                                                          1. Андрей
                                                                                                                                                                                                                            Андрей01 марта 2021, 10:57#
                                                                                                                                                                                                                            autoplaySpeed это скорость его замены на другой слайд. А где указывается через какое время он поменяет слайд?
                                                                                                                                                                                                                            1. Andy Si01 марта 2021, 11:24#
                                                                                                                                                                                                                              autoplaySpeed — это как раз пауза между автопереходом к следующему слайду. Есть ещё свойство speed, которое отвечает за скорость анимации при пролистывании и по-умолчанию оно 300 миллисекунд. Больше никаких свойств связанных со скоростью нет.
                                                                                                                                                                                                                        2. Olena Кунина
                                                                                                                                                                                                                          Olena Кунина06 марта 2021, 23:21#
                                                                                                                                                                                                                          Здравствуйте, подскажите пожалуйста если не трудно синтаксис для слайдера у которого задано пару параметров и включена автоматическая прокрутка (мне нужно чтобы когда заходишь на страницу они бы просто листались — не могу сообразить — заранее спасибо)
                                                                                                                                                                                                                          1. Olena Кунина
                                                                                                                                                                                                                            Olena Кунина07 марта 2021, 09:22#
                                                                                                                                                                                                                            все вопос снимается — разобралась, теперь осталось сообразить как стили вернуть на место
                                                                                                                                                                                                                            1. Andy Si07 марта 2021, 14:22#
                                                                                                                                                                                                                              Думаю и с этим разберешься, я в тебя верю :)
                                                                                                                                                                                                                              1. Olena Кунина
                                                                                                                                                                                                                                Olena Кунина08 марта 2021, 23:02#
                                                                                                                                                                                                                                спсибо)) разобралась и применила к 4 слайдерам в проекте — проблема с тенями — особенно круглые очень не красиво обрезаются, пыталась поиграть с маргинами паддингами — вылезают какие то артефакты по странице — типа куски теней — отказаться от теней не могу по проекту они везде((
                                                                                                                                                                                                                          2. Андрей
                                                                                                                                                                                                                            Андрей12 марта 2021, 18:46(был изменён)#
                                                                                                                                                                                                                            $('.main-slider').slick({
                                                                                                                                                                                                                                slidesToShow: 4,
                                                                                                                                                                                                                                slidesToScroll: 1,
                                                                                                                                                                                                                                prevArrow: '<img class="slider-arrow slider-arrow__left" src="images/arrow-left.svg">',
                                                                                                                                                                                                                                nextArrow: '<img class="slider-arrow slider-arrow__right" src="images/arrow-right.svg">'
                                                                                                                                                                                                                              });
                                                                                                                                                                                                                            Приветствую. В данном слайдере при показе четырех слайдов класс «slick-current» присваивается первому слайду слева. Можно ли сделать, чтобы он присваивался второму слайду? Заранее благодарю за ответ.
                                                                                                                                                                                                                            1. Andy Si12 марта 2021, 19:45#
                                                                                                                                                                                                                              Привет… попробуй добавить параметр initialSlide: 1, по-умолчанию равен 0, а 1 будет как-раз второй слайд устанавливать активным.
                                                                                                                                                                                                                              1. Андрей
                                                                                                                                                                                                                                Андрей13 марта 2021, 10:19#
                                                                                                                                                                                                                                Пробовал. Не то что мне нужно. Если добавить этот параметр, то показ слайдов начинается со второго слайда в списке. А мне нужно, чтобы из четырех слайдов, которые в данный момент на экране класс «slick-current» был не у первого слева, а у второго. Т.е. при прокрутке слайдов класс «slick-current» должен быть на втором слайде из тех, которые в данный момент отображаются (на этот класс буду вешать дополнительные свойства).
                                                                                                                                                                                                                                1. Андрей
                                                                                                                                                                                                                                  Андрей13 марта 2021, 10:28#
                                                                                                                                                                                                                                  Вопрос снимается, свойства задал соседу.
                                                                                                                                                                                                                            2. Александр
                                                                                                                                                                                                                              Александр17 марта 2021, 22:08#
                                                                                                                                                                                                                              Добрый день.

                                                                                                                                                                                                                              Вот как бы ещё вывести под картинкой её alt в качестве подписи? Есть какие-нибуль идеи или готовые решения?
                                                                                                                                                                                                                              1. Александр
                                                                                                                                                                                                                                Александр18 марта 2021, 04:11#
                                                                                                                                                                                                                                Вопрос снимается, сделал стандартными средствами php.
                                                                                                                                                                                                                              2. Александр
                                                                                                                                                                                                                                Александр18 марта 2021, 04:37#
                                                                                                                                                                                                                                Но есть другая проблема.

                                                                                                                                                                                                                                У меня вариант slick'а с синхронизированным слайдером (Slider Syncing): вверху большая картинка, а под ней превьюшки, которые все разной ширины и высоты. Так вот, эти превьюшки все выравнены по вертикали по TOP, что не есть красиво.

                                                                                                                                                                                                                                Как выровнять их по вертикали по серединке (middle)?

                                                                                                                                                                                                                                В интернете решений (и идей) много, но ни одно корректно не срабатывает.
                                                                                                                                                                                                                                1. Andy Si18 марта 2021, 09:09#
                                                                                                                                                                                                                                  Изучи flex вёрстку, с помощью неё можно выравнивать блоки как угодно.
                                                                                                                                                                                                                                2. Александр
                                                                                                                                                                                                                                  Александр19 марта 2021, 03:31#
                                                                                                                                                                                                                                  Нет, это в теории так просто, на практике по-другому. Пробовал я флех, естественно, он действительно выравнивает превьюшки в слайдере, но одновременно режет пополам и основную картинку сверху. Там всё гораздо сложнее, чем кажется на первый взгляд, трак и слайдер взаимосвязаны — что меняешь в одном, сказывается и на другом.
                                                                                                                                                                                                                                  1. Юлия
                                                                                                                                                                                                                                    Юлия17 июня 2021, 08:37#
                                                                                                                                                                                                                                    Добрый день. Не работает слайдер с бутстрап 4.
                                                                                                                                                                                                                                    Вложенность:

                                                                                                                                                                                                                                    Container-fluid
                                                                                                                                                                                                                                    Row
                                                                                                                                                                                                                                    Slider
                                                                                                                                                                                                                                    Div — img
                                                                                                                                                                                                                                    Div — img
                                                                                                                                                                                                                                    Div — img

                                                                                                                                                                                                                                    Слайдер нужен на весь экран. Адаптивный.
                                                                                                                                                                                                                                    Спасибо ♥️
                                                                                                                                                                                                                                    1. Andy Si17 июня 2021, 09:20#
                                                                                                                                                                                                                                      Надо в вашей конкретной вёрстке разбираться, так с бутсрапом нормально slick работает, но бывают нюансы. У вас в разметке предоставленной ещё не вижу чтобы в row был какой-то внутренний блок, например col-sm. Проверьте.

                                                                                                                                                                                                                                      Thanks! :)
                                                                                                                                                                                                                                      1. Юлия
                                                                                                                                                                                                                                        Юлия18 июня 2021, 11:43(был изменён)#
                                                                                                                                                                                                                                        Спасибо за обратную связь!
                                                                                                                                                                                                                                        Да проблема была в том что отсутствовал col-12 т.к слайдер нужен был на всю ширину экрана.
                                                                                                                                                                                                                                        Реализовала вот так:
                                                                                                                                                                                                                                        <section id="offer" class="offer">
                                                                                                                                                                                                                                              <div class="one-sliderg">
                                                                                                                                                                                                                                                <div class="img-fluid">
                                                                                                                                                                                                                                                  <img src="image/home/desktop.jpg" alt="slider" class="img-fluid">
                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                                <div class="img-fluid">
                                                                                                                                                                                                                                                  <img src="image/home/desktop.jpg" alt="slider" class="img-fluid">
                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                                <div class="img-fluid">
                                                                                                                                                                                                                                                  <img src="image/home/desktop.jpg" alt="slider" class="img-fluid">
                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                                            </section>
                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                        1. Andy Si18 июня 2021, 12:05#
                                                                                                                                                                                                                                          Ну и отлично. Код поправил, чтобы отображался нормально.
                                                                                                                                                                                                                                    2. Алексей
                                                                                                                                                                                                                                      Алексей23 июня 2021, 13:03#
                                                                                                                                                                                                                                      Здравствуйте! Подскажите, а если используются для слайдов картинки разной высоты, можно как либо центрировать их по вертикали?
                                                                                                                                                                                                                                      1. Andy Si23 июня 2021, 15:38#
                                                                                                                                                                                                                                        Добрый день… Можно, надо обернуть изображения в дополнительный div и прописать для него стили:
                                                                                                                                                                                                                                        display: flex;
                                                                                                                                                                                                                                        align-items: center;
                                                                                                                                                                                                                                        justify-content: center;
                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                        Если не сработает, то надо смотреть что там с вёрсткой, а так для выравнивания по вертикали так и так использовать только flex.
                                                                                                                                                                                                                                        1. Алексей
                                                                                                                                                                                                                                          Алексей23 июня 2021, 16:20#
                                                                                                                                                                                                                                          Не сработало, все без изменений…
                                                                                                                                                                                                                                          1. Andy Si23 июня 2021, 16:26#
                                                                                                                                                                                                                                            Смотри вёрстку, я написал что это примерное решение центрирования.
                                                                                                                                                                                                                                            1. Алексей
                                                                                                                                                                                                                                              Алексей23 июня 2021, 16:54#
                                                                                                                                                                                                                                              Спасибо, разобрался! Высоту div задал нужную и все заработало)
                                                                                                                                                                                                                                              1. Andy Si23 июня 2021, 18:19#
                                                                                                                                                                                                                                                Отлично ;)
                                                                                                                                                                                                                                        2. denis
                                                                                                                                                                                                                                          denis22 июля 2021, 04:56#
                                                                                                                                                                                                                                          На старших версиях jQuery он не работает, поэтому для встраивания в современные сайты не годится
                                                                                                                                                                                                                                          1. Andy Si22 июля 2021, 09:20#
                                                                                                                                                                                                                                            А на какой версии не работает? Здесь версия 3.4 — всё в порядке.
                                                                                                                                                                                                                                          2. NikolayS
                                                                                                                                                                                                                                            NikolayS10 августа 2021, 18:58#
                                                                                                                                                                                                                                            Столкнулся с проблемой — слайдер не отображался в Firefox, а в Chrome всё было нормально. Удалось решить, сократив url ссылки.
                                                                                                                                                                                                                                            Было:
                                                                                                                                                                                                                                            <div class="slider-for">
                                                                                                                                                                                                                                              <div class="slider-for__item">
                                                                                                                                                                                                                                                <img src="/upload/iblock/9d1/kknkllcrsb36pjhlukv2rigs18buml1h/button_prototype1.jpg" alt="">
                                                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                            Стало:
                                                                                                                                                                                                                                            <div class="slider-for">
                                                                                                                                                                                                                                              <div class="slider-for__item">
                                                                                                                                                                                                                                                <img src="/upload/button_prototype1.jpg" alt="">
                                                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                            Такой длинный путь был, т.к. файлы грузились через Медиабиблиотеку Битрикса.
                                                                                                                                                                                                                                            В чем причина так и не понял. Может у плагина есть ограничение на длину строки урла? Или дело не в плагине, а в CRM? Интересно, если в плагине ограничение, то как исправить. Через медиабиблиотеку грузить всё-таки удобнее и правильнее.
                                                                                                                                                                                                                                            1. Andy Si11 августа 2021, 08:56#
                                                                                                                                                                                                                                              Вряд ли дело в плагине. Тут либо CRM, либо какой-то плагин файрфоксовский что-то с ними делал. Может даже adBlock что-то подозрительное увидел в таком пути.

                                                                                                                                                                                                                                              Сам по себе путь не такой уж и большой, всего 73 символа, скрипту должно быть всё равно.
                                                                                                                                                                                                                                            2. Степан
                                                                                                                                                                                                                                              Степан27 августа 2021, 21:53#
                                                                                                                                                                                                                                              Добрый вечер! Подскажите пожалуйста — если переключать руками (не слайдить, а по точкам тыкать), а потом начать слайдить — становятся активными сразу 2 точки. Это как — то можно исправить? (В примерах на этом сайте тоже присутствует такой баг).
                                                                                                                                                                                                                                              1. Andy Si28 августа 2021, 09:21#
                                                                                                                                                                                                                                                Добрый день. Не смог воспроизвести баг. Попробуй воспроизвести в другом браузере или в режиме инкогнито, где отключены все плагины.
                                                                                                                                                                                                                                                1. Степан
                                                                                                                                                                                                                                                  Степан30 августа 2021, 17:14#
                                                                                                                                                                                                                                                  Добрый день! Забыл уточнить, что этот баг только на мобильных устройствах.
                                                                                                                                                                                                                                                  1. Andy Si30 августа 2021, 18:14#
                                                                                                                                                                                                                                                    Да, воспроизвелось. Попробуй стили поправить в файле slick-themes.css
                                                                                                                                                                                                                                                    .slick-dots li button:hover:before,
                                                                                                                                                                                                                                                    .slick-dots li button:focus:before
                                                                                                                                                                                                                                                    {
                                                                                                                                                                                                                                                        opacity: 1;
                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                    Обернуть в эту конструкцию:

                                                                                                                                                                                                                                                    @media (min-width: 480px) {
                                                                                                                                                                                                                                                     .slick-dots li button:hover:before,
                                                                                                                                                                                                                                                     .slick-dots li button:focus:before
                                                                                                                                                                                                                                                     {
                                                                                                                                                                                                                                                        opacity: 1;
                                                                                                                                                                                                                                                     }
                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                              2. MODx
                                                                                                                                                                                                                                                MODx07 сентября 2021, 02:31#
                                                                                                                                                                                                                                                Здравствуйте, а существует ли параметр который отвечает за появление стрелочек при наведении курсора на слайдер?
                                                                                                                                                                                                                                                1. Andy Si09 сентября 2021, 07:47#
                                                                                                                                                                                                                                                  Добрый день. Нет насколько помню. Реализуй с помощью css стилей. Я пока помочь не могу — компьютера нет временно.
                                                                                                                                                                                                                                                2. Денис
                                                                                                                                                                                                                                                  Денис16 сентября 2021, 13:40#
                                                                                                                                                                                                                                                  Здравствуйте, не работает слайдер Slick Slider в собственной теме Вордпресса. Посмотрел кучу подобных вопросов, как я понял все упирается в зависимости подключения js файлов к движку. У меня зависимости указаны, в доказательство этому работает другой jquery плагин в шаблоне.

                                                                                                                                                                                                                                                  Собственно сам файл functions.php:

                                                                                                                                                                                                                                                  add_action( 'wp_enqueue_scripts', 'summer_palace_style' );
                                                                                                                                                                                                                                                  add_action( 'wp_enqueue_scripts', 'summer_palace_scripts' );
                                                                                                                                                                                                                                                  function summer_palace_style() {

                                                                                                                                                                                                                                                  wp_enqueue_style( 'normalize-style', get_template_directory_uri(). '/assets/css/magnific-popup.css' );
                                                                                                                                                                                                                                                  wp_enqueue_style( 'magnific-style', get_template_directory_uri(). '/assets/css/normalize.css' );
                                                                                                                                                                                                                                                  wp_enqueue_style( 'main-style', get_stylesheet_uri() );

                                                                                                                                                                                                                                                  }

                                                                                                                                                                                                                                                  function summer_palace_scripts() {

                                                                                                                                                                                                                                                  wp_deregister_script( 'jquery' );
                                                                                                                                                                                                                                                  wp_register_script( 'jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js');
                                                                                                                                                                                                                                                  wp_enqueue_script( 'jquery' );

                                                                                                                                                                                                                                                  wp_enqueue_script( 'magnific-script', get_template_directory_uri(). '/assets/js/jquery.magnific-popup.min.js', array('jquery'), null, true );
                                                                                                                                                                                                                                                  wp_enqueue_script( 'slick-script', get_template_directory_uri(). '/assets/js/slick.min.js', array('jquery'), null, true );
                                                                                                                                                                                                                                                  1. Andy Si16 сентября 2021, 13:49#
                                                                                                                                                                                                                                                    Добрый день. По коду невозможно определить что не так. И не вижу подключения css стилей для слайдера. Возможно из-за их отсутствия не работает.
                                                                                                                                                                                                                                                    1. Денис
                                                                                                                                                                                                                                                      Денис16 сентября 2021, 13:52#
                                                                                                                                                                                                                                                      Вот подключение стилей, переделанное.

                                                                                                                                                                                                                                                      function summer_palace_style() {

                                                                                                                                                                                                                                                      wp_enqueue_style( 'normalize-style', get_template_directory_uri(). '/assets/css/magnific-popup.css' );
                                                                                                                                                                                                                                                      wp_enqueue_style( 'slick', get_template_directory_uri(). '/assets/css/slick.css' );
                                                                                                                                                                                                                                                      wp_enqueue_style( 'slick-theme', get_template_directory_uri(). '/assets/css/slick-theme.css' );
                                                                                                                                                                                                                                                      wp_enqueue_style( 'magnific-style', get_template_directory_uri(). '/assets/css/normalize.css' );
                                                                                                                                                                                                                                                      wp_enqueue_style( 'main-style', get_stylesheet_uri(), array('normalize-style', 'magnific-style'));

                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                      1. Денис
                                                                                                                                                                                                                                                        Денис16 сентября 2021, 13:58#
                                                                                                                                                                                                                                                        Этот слайдер вообще возможно подключить к WP таким образом?
                                                                                                                                                                                                                                                        1. Andy Si16 сентября 2021, 14:02(был изменён)#
                                                                                                                                                                                                                                                          Да по идее можно и так, но всё же попробуй подключить не через functions.php, а в footer.php

                                                                                                                                                                                                                                                          Но мне кажется что дело не в подключении, а в том что он конфликтует с какими-то другими скриптами. Что именно не так можно посмотреть в браузерной консоли.
                                                                                                                                                                                                                                                          1. Денис
                                                                                                                                                                                                                                                            Денис16 сентября 2021, 14:21#
                                                                                                                                                                                                                                                            Добавил свойство autoplay: true, слайдер заработал. Но вот навигационные стрелки не отображаются.
                                                                                                                                                                                                                                                    2. Inna
                                                                                                                                                                                                                                                      Inna01 ноября 2021, 20:04(был изменён)#
                                                                                                                                                                                                                                                      Здравствуйте, подскажите пожалуйста, что делать?
                                                                                                                                                                                                                                                      Подключила slick slider, работает при любой адаптивной ширине, кроме как в ширине под ipad 768px, там он преобразовывается в сlass role
                                                                                                                                                                                                                                                      Под слайдом появляются три кнопки, слайд листается при нажатии на эти кнопки, а должен листаться при нажатии на стрелки, которые на слайде. Хотя в ширине 1024рх, с теми же настройками, все листается при нажатии на стрелки, которые на слайде. И в меньшей ширине тоже все хорошо.
                                                                                                                                                                                                                                                      1. Andy Si02 ноября 2021, 10:18(был изменён)#
                                                                                                                                                                                                                                                        Добрый день. Нет универсального решения, надо смотреть и отлаживать вёрстку слайдера непосредственно на сайте. Скорее всего, стрелки уходят за пределы видимой области по каким-то причинам. Это правится только CSS стилями.
                                                                                                                                                                                                                                                        1. Inna
                                                                                                                                                                                                                                                          Inna02 ноября 2021, 10:58#
                                                                                                                                                                                                                                                          Спасибо за ответ!
                                                                                                                                                                                                                                                      2. Алексей
                                                                                                                                                                                                                                                        Алексей17 марта 2022, 19:56#
                                                                                                                                                                                                                                                        Здравствуйте!
                                                                                                                                                                                                                                                        Подскажите, использую следующую конструкцию:
                                                                                                                                                                                                                                                         $('.single-item').slick({
                                                                                                                                                                                                                                                            infinite: true,
                                                                                                                                                                                                                                                            dots: true,
                                                                                                                                                                                                                                                            slidesToShow: 3,
                                                                                                                                                                                                                                                            slidesToScroll: 1,
                                                                                                                                                                                                                                                            autoplay: true,
                                                                                                                                                                                                                                                            speed: 500,
                                                                                                                                                                                                                                                            arrows: true,
                                                                                                                                                                                                                                                            lazyLoad: 'ondemand',
                                                                                                                                                                                                                                                            draggable: true,    
                                                                                                                                                                                                                                                          });
                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                        но тогда, при наведении на картинки мыши слайдер останавливается и снова не запускается. Если же использовать fade: true, тогда почему то отображается только 1 картинка вместо 3.
                                                                                                                                                                                                                                                        Подскажите, как сделать так, что бы отображались 3 картинки и слайдер не останавливался при наведении на них мышки.
                                                                                                                                                                                                                                                        1. Andy Si18 марта 2022, 08:55#
                                                                                                                                                                                                                                                          То что слайдер останавливается при наведении на него мыши, это стандратное его поведение. Если убрать мышь, то он начинает двигаться снова. Если у вас не продолжает прокрутку после ухода с него мыши — значит какие-то проблемы, не сталкивался.

                                                                                                                                                                                                                                                          Попробуй так:

                                                                                                                                                                                                                                                          $('.single-item').slick({
                                                                                                                                                                                                                                                              infinite: true,
                                                                                                                                                                                                                                                              dots: true,
                                                                                                                                                                                                                                                              slidesToShow: 3,
                                                                                                                                                                                                                                                              slidesToScroll: 1,
                                                                                                                                                                                                                                                              autoplay: true,
                                                                                                                                                                                                                                                              autoplaySpeed: 6000,
                                                                                                                                                                                                                                                              speed: 500,
                                                                                                                                                                                                                                                              arrows: true,  
                                                                                                                                                                                                                                                            });
                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                          А так к сожалению слайдер уже давно не поддерживается, поэтому лучше искать другие решения.
                                                                                                                                                                                                                                                        2. Ярослав
                                                                                                                                                                                                                                                          Ярослав20 ноября 2022, 14:58#
                                                                                                                                                                                                                                                          Как изменить текст в dots? Мне нужно вместо цифр 1,2,3 и тд. свой текст. Как это сделать?
                                                                                                                                                                                                                                                          1. Andy Si21 ноября 2022, 09:26#
                                                                                                                                                                                                                                                            Насколько знаю, никак. Только если убирать dots и ниже слайдера верстать собственные кнопки и навешивать на них функции перехода к нужным слайдам.
                                                                                                                                                                                                                                                          2. Андрей
                                                                                                                                                                                                                                                            Андрей04 января 2023, 14:48#
                                                                                                                                                                                                                                                            решение для slick slyder где мы сами пишем свой текст в дотсы!!! Очень крутая штука.

                                                                                                                                                                                                                                                            Так выглядит HTML к элементу добавляется H3 (можно любой) с надписью, которая будет в дотсе:

                                                                                                                                                                                                                                                            — сам слайд
                                                                                                                                                                                                                                                            текст кот. будет в дотсах

                                                                                                                                                                                                                                                            — сам слайд
                                                                                                                                                                                                                                                            текст кот. будет в дотсах

                                                                                                                                                                                                                                                            — сам слайд
                                                                                                                                                                                                                                                            текст кот. будет в дотсах

                                                                                                                                                                                                                                                            — сам слайд
                                                                                                                                                                                                                                                            текст кот. будет в дотсах



                                                                                                                                                                                                                                                            Так выглядит JS:
                                                                                                                                                                                                                                                            где .volume__slick — класс слайдера
                                                                                                                                                                                                                                                            h3 — атрибут, где пишем что будет в дотсе

                                                                                                                                                                                                                                                            $('.volume__slick').on('init', function(event, slick){
                                                                                                                                                                                                                                                            var dots = $( '.slick-dots li' );
                                                                                                                                                                                                                                                            console.log( 'м' );
                                                                                                                                                                                                                                                            dots.each( function( k, v){
                                                                                                                                                                                                                                                            $(this).find( 'button' ).addClass( 'heading'+ k );
                                                                                                                                                                                                                                                            });
                                                                                                                                                                                                                                                            var items = slick.$slides;
                                                                                                                                                                                                                                                            items.each( function( k, v){
                                                                                                                                                                                                                                                            var text = $(this).find( 'h3' ).text();
                                                                                                                                                                                                                                                            $( '.heading' + k ).text(text);
                                                                                                                                                                                                                                                            });
                                                                                                                                                                                                                                                            });
                                                                                                                                                                                                                                                            $('.volume__slick').slick({
                                                                                                                                                                                                                                                            dots: true,
                                                                                                                                                                                                                                                            focusOnSelect: true,
                                                                                                                                                                                                                                                            infinite: true,
                                                                                                                                                                                                                                                            arrows: false,
                                                                                                                                                                                                                                                            speed: 300,
                                                                                                                                                                                                                                                            slidesToShow: 1,
                                                                                                                                                                                                                                                            slidesToScroll: 1,
                                                                                                                                                                                                                                                            });

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

                                                                                                                                                                                                                                                            .slick-slide{
                                                                                                                                                                                                                                                            h3{
                                                                                                                                                                                                                                                            display: none;
                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                            1. Александр
                                                                                                                                                                                                                                                              Александр07 марта 2023, 18:04#
                                                                                                                                                                                                                                                              Здравствуйте! Добавил слайдер, но при прокрутке сайта вниз, изображения и кнопки, налезают поверх подвижного меню. Как это можно исправить?
                                                                                                                                                                                                                                                              1. Александр
                                                                                                                                                                                                                                                                Александр07 марта 2023, 19:24#
                                                                                                                                                                                                                                                                Вопрос снимается, глянул как работает на оригинальном сайте https://kenwheeler.github.io/slick/, пойдёт z-index: 10000;
                                                                                                                                                                                                                                                              2. максим
                                                                                                                                                                                                                                                                максим26 июля 2023, 18:32(был изменён)#
                                                                                                                                                                                                                                                                $('.single-item').slick({
                                                                                                                                                                                                                                                                  slidesToShow: 1,
                                                                                                                                                                                                                                                                  slidesToScroll: 1,
                                                                                                                                                                                                                                                                  arrows: false,
                                                                                                                                                                                                                                                                  fade: true,
                                                                                                                                                                                                                                                                  asNavFor: '.single-item'
                                                                                                                                                                                                                                                                });
                                                                                                                                                                                                                                                                $('.single-item').slick({
                                                                                                                                                                                                                                                                  slidesToShow: 3,
                                                                                                                                                                                                                                                                  slidesToScroll: 1,
                                                                                                                                                                                                                                                                  asNavFor: '.single-item',
                                                                                                                                                                                                                                                                  dots: true,
                                                                                                                                                                                                                                                                  centerMode: true,
                                                                                                                                                                                                                                                                  focusOnSelect: true
                                                                                                                                                                                                                                                                });
                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                здравствуйте не могу разобраться почему не работает slick-slider, может сможет кто помочь? проблема конкретно в этом файле
                                                                                                                                                                                                                                                                1. Andy Si31 июля 2023, 11:31#
                                                                                                                                                                                                                                                                  Добрый день. Надо смотреть непосредственно на сайте. Сам код рабочий.
                                                                                                                                                                                                                                                                  1. максим
                                                                                                                                                                                                                                                                    максим02 августа 2023, 17:04#
                                                                                                                                                                                                                                                                    могу я вам скинуть файл с сайтом?
                                                                                                                                                                                                                                                                    1. Andy Si02 августа 2023, 18:02#
                                                                                                                                                                                                                                                                      Попробуй, если он будет работать локально, то посмотрю в чём дело.
                                                                                                                                                                                                                                                                      1. Andy Si02 августа 2023, 18:04#
                                                                                                                                                                                                                                                                        Кинуть можно на почту info@realadmin.ru
                                                                                                                                                                                                                                                                  © REALADMIN.RU   2024 г.
                                                                                                                                                                                                                                                                  Страница сгенерирована: 0,3218 s | 12 mb.
                                                                                                                                                                                                                                                                  На каком уровне Вы играете в шахматы?
                                                                                                                                                                                                                                                                  OPROS