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

Using rows: 2 and on responsive row: 1 doesn’t work #3277

Comments

fourroses666 commented Dec 27, 2017 •

I need to have 1 row when going responsive

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

fourroses666 commented Jan 3, 2018

Anyone an idea how to fix this?

claudiuTicu commented Jan 4, 2018 •

I have a similar issue:
I’m trying to display 4 images on two rows starting from mobile.

Something like:
1 2
3 4

Please let me know if there is any way to fix this.
Thank you,

x35a commented Jan 15, 2018

Try to use slick 1.8.1 and slick.js file. Its important cause slick.min.js is broken in 1.8.1

jeffmagill commented Jun 22, 2018

I just want to confirm that @rosivanov ‘s suggestion to use the un-minified 1.8.1 resolved the issue for me. Thanks.

Bobyo commented Oct 3, 2018

So with Slick 1.8.1 fixed on the un-minified version still you can’t do rows on responsive. One workaround is to have the mobileFirst: true on the initial settings and add the row settings there, then have a separate option on the responsive for 1024 where you default back.
@claudiuTicu ‘s example is the way to do it.

sharathdaniel commented Oct 21, 2019

Still facing this issue, sad to see the plugin isn’t maintained anymore.

mircoraffinetti commented Nov 20, 2019

As suggested from @rosivanov with .js version is ok.
You can minify the .js version and use it.

AntonGrekov commented Apr 9, 2020

Had same problem. rows: 1 along with slidesperRow: 2 had strange effect on slides
Just switching to unmified version of slick.js resolved issue

Mobashir1995 commented May 14, 2020 •

I just want to confirm that @x35a #3277 (comment) is working fine. The same fix also applies works for 1.8.0.
you are really a great person. Thanks a lot

muzKore commented Jan 31, 2021 •

I’m very late to the party but I am facing this issue as well. I appreciate some of the hints and tips given above.
There is a codepen at https://codepen.io/booom/pen/dyYjREp which I started playing with to see if it was something I was doing locally that was breaking it and stopping rows working in responsive mode.
What I wanted was (mobile first) 1×1 slideshow on mobile, 2rowsx1col @ min-width:576px and 2×2 @ min-width:992px.
With some adjustments to the jQuery on the right, I got it working eactly as I needed it. Rows do work on responsive.
If you go to the Codepen link, swap in the following code to the right top JS panel and wait for the bottom slider to update, drag the window width, to the breakpoints I mentioned and then you will see what I mean. It works.

So, I have it working in the CodePen but not in my site.. GRRRR.

Источник

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

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

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

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

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

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

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

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

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

Источник

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

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

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

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

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

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

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

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

Источник

Как решить проблему с двумя slick-слайдерами на странице?

Друзья, поставил на свой лендинг два разных slick-слайдера. Для каждого из них прописал отдельные свойства и путь к файлам JS и CSS в файле index:

Файлы style.css и common.js общие.
При загрузке страницы ОБА слайдера почему-то используют те данные, которые записаны в slick1. Как я ни пытался добиться того, чтобы они использовали разные свойства, у меня ничего не получается. В чём может быть проблема?
Я новичок в html/css/js, поэтому буду рад любой помощи. Спасибо!

• Вопрос задан более года назад
• 1401 просмотр

Вам следует использовать по одному css и js файлу для любого количестве slick-слайдеров на странице.
Если оба слайдера используют одни и те же данные, то тут всего 2 варианта:
1) Вы по ошибке указали один и тот же объект в качестве настроек для обоих слайдеров,
2) Вы инициализировали действительно слайдеры с разными настройками, на одном и том же селекторе.

P.s.Если оба варианта Вам не подходят — приложите js код (можно вместе с html), а то кроме как догадок\предположений ничего не получите.

Вы можете подключить 1 CSS и 1 JS файл к вашему html.
Просто при инициализации используйте разные названия каруселей.

И свойства кидайте на вот эти классы slick1, slick2

Источник

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 » срабатывает перед переходом к другому слайду:

Источник