Slick slider responsive не работает

initialSlide not working in responsive settings. #755

Comments

JoonasToroi commented Nov 4, 2014

I noticed that the initialSlide setting doesn’t work thru responsive settings.

The text was updated successfully, but these errors were encountered:

kenwheeler commented Nov 4, 2014

Typically initial slide is set initially. Is there a scenario in which you would actually need to have a different initial slide for different window sizes?

JoonasToroi commented Nov 4, 2014

I thought this might be more of an feature than an bug. But yeah, I have a scenario where this would have been handy.

I have a scenario where the amount of slides vary on different pages. One of the slides represents the page the user is on. I want that slide to be the first one, but as I have different amounts of slides on different screen sizes I might get an scenario where I have less slides on the screen than what it can be fitted on the slidesToShow. If I have the initialSlide value set on these scenarios I will lose the slider functionality and some of the slides might be «dropped» from view.

Here’s a more precise jsfiddle of the problem: http://jsfiddle.net/9p3agprL/52/

I would have used the responsive settings to set the innitialSlide to 0 if there was room for all the slides in the slider. Other way to fix this might be that the innitialSlide value would be set to 0 if slidesToShow is greater than the number of slides.

kenwheeler commented Nov 7, 2014

Looking into this.

enb141 commented Dec 15, 2014

I’m also having this issue, what I can say is that the problem appears after slidesToShow, for example if I set slidesToShow: 4 and initialSlide: 2, it works but if I change initialSlide: 3 then it doesn’t works.

This works:
infinite: true,
slidesToShow: 4,
slidesToScroll: 3,
initialSlide:

This doesn’t:
infinite: true,
slidesToShow: 4,
slidesToScroll: 3,
initialSlide:

All this assuming we have 5 «items» to test with.

By the way I’m not using responsive settings, here is my script

jmlivingston commented Jan 9, 2015

I am having the same issue and have worked around it with the following hack. You can replace the previous and next cases in the Slick.prototype.changeSlide method. This isn’t that pretty, but it fixes the issue I was having. That being said, this assumes infinity is false.

Sadly this editor isn’t honoring the «pre» tag, so you may have to see the source for the html.

SOLUTION:
case ‘previous’:
slideOffset = indexOffset === 0 ? _.options.slidesToScroll : .options.slidesToShow — indexOffset;
if (.slideCount > _.options.slidesToShow) <
//ORIGINAL — .slideHandler(.currentSlide — slideOffset, false, dontAnimate);
//HACK START
var slideTo = .currentSlide — slideOffset;
if (!.options.infinite && slideTo _.options.slidesToShow) <
//ORIGINAL — .slideHandler(.currentSlide + slideOffset, false, dontAnimate);
//HACK START
var slideTo = .currentSlide + slideOffset;
if (!.options.infinite && (slideTo + slideOffset) > _.slideCount) <
slideTo = _.slideCount — slideOffset;
>
_.slideHandler(slideTo, false, dontAnimate);
//HACK END
>
break;

JAVASCRIPT
$(‘#slider’).slick( <
infinite: false,
centerMode: true,
initialSlide: 8,
responsive: [ <
breakpoint: 1680,
settings: <
slidesToShow: 8,
centerMode: false,
slidesToScroll: 8
>
>, <
breakpoint: 1480,
settings: <
slidesToShow: 8,
centerMode: false,
slidesToScroll: 8
>
>, <
breakpoint: 1280,
settings: <
slidesToShow: 6,
centerMode: false,
slidesToScroll: 6
>
>, <
breakpoint: 1152,
settings: <
slidesToShow: 6,
centerMode: false,
slidesToScroll: 6
>
>, <
breakpoint: 1024,
settings: <
slidesToShow: 5,
centerMode: false,
slidesToScroll: 5
>
>, <
breakpoint: 896,
settings: <
slidesToShow: 5,
centerMode: false,
slidesToScroll: 5
>
>, <
breakpoint: 768,
settings: <
slidesToShow: 4,
centerMode: false,
slidesToScroll: 4
>
>, <
breakpoint: 640,
settings: <
slidesToShow: 3,
centerMode: false,
slidesToScroll: 3
>
>, <
breakpoint: 480,
settings: <
slidesToShow: 2,
centerMode: false,
slidesToScroll: 2
>
>]
>);

CSS
.slider-container <
background-color: green;
text-align: center;
font-size: 40px;
color: white;
border: 3px solid white;
padding-top: 30px;
padding-bottom: 30px;
cursor: pointer;
>
.pager-active .slider-container <
background-color: orange;
>

Источник

Responsive breakpoints not working for slick slider

I have implemented slick slider which works fine without resizing the browser. But when I resize the browser to 1024 then the responsive breakpoint settings doesn’t work.

Any help is highly appreciated.

6 Answers 6

Add this settings to your code;

Add slidesToShow and slidesToScroll option in each breakpoint.

First of all, «variableHeight» option does not exist in Slick Carousel.

To solve your issue, remove variableWidth: true , because this will make your slides take full with of the carousel. And you can also not use «mobileFirst» option if your page is not using this methodology.

So finally your config should be like this, below

This did the trick for me.

Add this to your js and call the slider as shown.

and in your css make the slide display: inline-block; that’s it. will work on all responsive screens.

I am not sure why your js template is failing with below:

I would follow up with their documentation, community, or file a bug.

In any case it is better practice to use CSS3 media queries for this. One approach; nest a div around the slider and position it relative , scale it and it’s child elements with width: 100%; and declaring max and min width ‘s within defined resolutions. This should start you in the right direction. Make sure to also make proper use of meta viewport.

Источник

Не работает slick слайдер, почему?

Всем привет. Все сделал как в документации, но он почему то не работает.. Причем вроде как подключился, но криво. Один из элементов вылазит слева страницы, причем его можно листать, но он не листается, от начала до конца страницы только двигается.. Потом вообще исчезает.. Что не так с этим слайдером?

• Вопрос задан более трёх лет назад
• 4696 просмотров

1 что надо всегда делать, это смотреть на ошибки в консоле, но допустим их там нет, тогда:

Почему тема перед основными стилями?

Убедитесь что $(‘.single-item’) находит, например так:
console.log($(‘.single-item’).length);
выведет в консоль 1 если все ок.

тут явно одна строка лишняя

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

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

Источник

Как решить проблему с отображением слайдера Slick?

Здравствуйте, проблема такая.

Есть два таба, в обоих табах есть слайдер slick.

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

Подскажите как можно сделать так чтобы картинки появлялись сразу.

• Вопрос задан более трёх лет назад
• 15795 просмотров

ohikoshimi, Ещё вариант есть, инициировать слайдер повторно, при открытии модального окна, тогда он начинает пересчёт параметров и открывается с обновлёнными данными.
К примеру, так:

Как видишь, событие нажатия вызывает модальное окно (у меня открытие модальки происходит в другой функции, а тебя должно быть по своему, или в этой дописать код), проверяет открыто ли (visible) и производит действия после заданного времени. Время должно быть не меньше того, сколько отводится на открытие модального окна.

Источник

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

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

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

Подготавливаем разметку. Для этого каждый слайд оборачиваем в «div», внутри которого будет какое-то содержимое:

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

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

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

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

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

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

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

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

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

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

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

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

Настройки

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

Параметр	Тип	Default	Описание
adaptiveHeight	boolean	false	Включает адаптирование высоты для одиночкного слайда горизонтальной карусели
autoplay	boolean	false	Автоматическая прокрутка
autoplaySpeed	int(ms)	3000	Скорость автопрокрутки в милисекундах
arrows	boolean	true	Показ/скрытие навигационных кнопок
prevArrow	html	button	Замена стандартной кнопки Preview
nextArrow	html	button	Замена стандартной кнопки Next
dots	boolean	false	Показ/скрытие навигационных точек под слайдером
draggable	boolean	true	Включает/выключает способность перелистывания слайдера перетаскиванием мышью
fade	boolean	false	Эффект затухания при перелистывании слайдов
focusOnSelect	boolean	false	Устанавливает фокус на выбранный элемент карусели при клике
easing	string	‘linear’	Анимационные эффекты перехода, их набор зависит от подключенных jQuery Easing плагинов
edgeFriction	integer	0.15	Сопротивление при попытки прокрутить карусель, когда дальше нет слайдов и она не зацилена
infinite	boolean	true	Бесконечное прокручивание (зацикливание)
initialSlide	integer	0	Номер слайда, с которого начинать показ
lazyLoad	string	‘ondemand’	Тип подгрузки слайдов. Принимает ‘ondemand’ или ‘progressive’
pauseOnHover	boolean	true	Пауза автопроигрывания при наведении мыши
pauseOnDotsHover	boolean	false	Пауза автопроигрывания при наведении мыши на навигационные точки
pauseOnHover	boolean	true	Пауза автопроигрывания при наведении мыши
rows	int	1	Может быть ‘window’, ‘slider’ или ‘min’

Методы

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

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

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

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

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

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

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

События

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

« beforeChange » срабатывает перед переходом к другому слайду:

Источник