Не работает breakpoint slick slider

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.

Источник

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.

Источник

[documentation improvement] better breakpoints explanation. #2100

Comments

wujekbogdan commented Feb 5, 2016

How does breakpoints really work? Documentation is not very clear about it.

• It doesn’t explain what does the number mean.? (is it the max-width, or min-width).
• It doesn’t explain what happens to properties which are not defined in the breakpoint:
  • Does it take the values defined «outside» the breakpoints?
  • Does it take the values defined in the higher or lower breakpoint?
  • Or maybe it takes the default values and ingores other breakpoints values?

Lets consider the following example:

I assume that the plugin follows the mobile firs approach, so:

• from 0px to 320px. infinite is set to false , slidesToShow is set to 1
• from 320px to 640px infinite is set to true (explicitly defined), slidesToShow is set to 1 (because it inherits values defined outside the breakpoints)
• from 640px to ∞ infinite is true (inherited from the previous breakpoint), slidesToShow is set to 2 (explicitly defined)

Correct me please if I’m wrong. And If I’m wrong then I might be not the only one who doesn’t fully understand the docs.

If I’m right, then still it would be good to fix the example given in the documentation. If the plugin follows the mobile first approach then it would be better to define lower breakpoints before the higher ones.

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

Источник

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

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

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

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

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

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

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

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

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

Источник

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

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

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

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

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

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

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

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

Источник