Slick unslick не работает

slider does not reinitialize on resize if «unslick» is used in breakpoints #2123

Comments

FilipIA commented Feb 15, 2016

When you configure the slider to destroy on a certain breakpoint, it is not reinitialized after resizing the browser because the «resize» event is detached when you perform «unslick».

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

mazzaker commented Feb 16, 2016

I don’t think this is a bug, because unslick removes the complete slick-slider there will be issues when unslicked sliders still fireing events.

Maybe reinit is an option:

Emiya0306 commented Nov 23, 2016 •

@mazzaker @simeydotme Yes, it is not a bug, but I think it is not a good choice for user to reinit it by userself. Slick should have its own instance props to log its breakpoint which causes unslick event, and next time to reinit by slick self.

If there are many slicks in one page, user should not reinit slick one by one. It causes a big trouble in my case. I think the best idea is slick can reinit by itself.

kulahin commented Nov 28, 2018 •

Try this code (using jQuery).

romannikiforov commented Dec 7, 2018

kindofbigelephants commented Feb 11, 2021 •

This is a bad design, because you provide such an option to behave differently when the browser window resizes. Yet only one direction of resize is handled? When i move my mouse to the left it should work and when i move it to the right it shouldn’t? This doesn’t make any sense.

A correct design would be to either handle reinitialization natively on resize or do not provide «unslick» option at all.

br4nnigan commented Feb 18, 2021 •

Once unslicked, there is no chance of reinitializing it apparently. So you better not resize your browser window, or slick will break.

edit:
create a resize end callback that includes this:

Источник

Reinit slider when leaving a breakpoint with settings: ‘unslick’ #1190

Comments

alexej-d commented Mar 29, 2015

Hey there,
really love your plugin, I use it in nearly every project – thanks for the great work.
I observed a counter-intuitive behaviour with the following init code:

One would expect that once leaving the breakpoint the slider reinitializes but it is not the case. Am I missing something?

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

aldidas commented Apr 29, 2015

In my recent project, I was facing this issue and ended up to assign the slick() initialization inside another function. So we can listen to jQuery’s $(window).resize(), and re-init the slick when the window’s width reach the breakpoint. Here is my code :

Suggestions open for any better solution 🙂

simeydotme commented Apr 29, 2015

It’s dubiously documented here: https://github.com/kenwheeler/slick/releases/tag/1.4.0 — No current plans to change this. Better to use the window.resize event if you plan on removing carousels 🙂

stevegrunwell commented Mar 7, 2017

Hopefully this helps someone else 🙂

Grawl commented Jul 20, 2017

my dirty try on this:

romannikiforov commented Dec 7, 2018

CornerstoneII commented Sep 24, 2020

Hopefully this helps someone else 🙂

Error on this page

stevegrunwell commented Sep 25, 2020

Oh no! I left the company several years ago, they must have taken down the engineering blog 😢 . I’ll reach out to the CEO and see if it can get reinstated (or if I can get copies of the posts to put elsewhere).

Thanks for the heads up!

dalaranunion commented Jun 8, 2021 •

Heya I was looking for a solution to this and I thought I should paste one here.

Assuming you ‘unslick’ slideshow(s) because you would like to save browser resources and then «slick» them once the size of the window increases, I think ‘resize’ events should be throttled. But anyway here is a nasty implementation.

Источник

How to make it working on mobile only? #3282

Comments

allainna commented Jan 4, 2018 •

I’d like the slider to be working on mobile only.
I created a new slider with mobileFirst: true and responsive: []. But it didn’t help.

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

ahmadalfy commented Jan 7, 2018

If you want it to work only on mobile then you should initialize it only on small screen by checking the screen size then deciding whether to run slick or not. It should be something like the following:

allainna commented Jan 9, 2018

Thanks for your reply.
How to make it working on resize? When I open it on a big screen and then resize the window the slider doesn’t work.

rijosh commented Feb 26, 2018 •

just wright the slider as function and call it in corresponding resolution, then window resize function destroy or reinitialize.

function mobileOnlySlider() <
$(‘.slider’).slick( <
autoplay: false,
speed: 1000,
autoplaySpeed: 5000
>);
>
if(window.innerWidth

createdbyken commented Feb 28, 2018

Yo will need a Sass to only show it on small devices

bkingg commented Mar 27, 2018 •

This will trigger slick on screens below 768px only

Mattomanka commented Apr 9, 2018

@bkingg I tried your code, but it still doesn’t work. If you load page in mobile, then resize browser to desktop and after that will again resize to mobile, it will stay in desktop version without slider.
Of course, I can use resize event, but it looks like a dirty solution for me.

bkingg commented Apr 9, 2018

@Mattomanka Use this instead

kristina3531 commented Jan 19, 2019 •

Breakpoints do not work correctly in Chrome, Opera, Microsoft edge, only in Mozilla work correctly.
$(window).on(‘load resize orientationchange’, function() <
$(‘.sertificates-slider’).each(function() <
var $carousel = $(this);
/* Initializes a slick carousel only on mobile screens */
// slick on mobile
if ($(window).width() > 991) <
if ($carousel.hasClass(‘slick-initialized’)) <
$carousel.slick(‘unslick’);
>
>
else <
if (!$carousel.hasClass(‘slick-initialized’)) <
$carousel.slick( <
slidesToShow: 3,
slidesToScroll: 1,
// mobileFirst: true,
nextArrow: ‘.sertificates__btn—next’,
prevArrow: ‘.sertificates__btn—prev’,
responsive: [
<
breakpoint: 768,
settings: <
slidesToShow: 2,
lidesToScroll: 1
>
>,
<
breakpoint: 576,
settings: <
slidesToShow: 1
>
>
]
>);
>
>
>);
>);

Semaho commented Mar 17, 2020

Great solution by @bkingg but I would recommend using $(window).outerWidth() instead as your breakpoint will react to this one.

(If you have a scrollbar, width() may return window width minus scrollbar width.

milijanadjeric commented Apr 15, 2020 •

this solved my problem! thank you very much !!

Источник

Reinitialize Slick js after successful ajax call

I am using Slick for a carousel implementation and everything works fine when the pages loads.What I am trying to achieve is that when i make an Ajax call to retrieve new data I still want the slick carousel implementation, at the moment i lose it.

I have put the call for slick into a function

and then I call the function within my success callback

But the function isn’t being called. How can I reinitialize this js?

11 Answers 11

You should use the unslick method:

The best way is you should destroy the slick slider after reinitializing it.

This should work.

Try this code, it helped me!

Note: I am not sure if this is correct but you can give it a try and see if this works.

There is a unslick method which de-initializes the carousel, so you might try using that before re-initializing it.

Hope this helps.

I had to unslick the carousel before the ajax call starts, but you can’t do that until there is already a slick carousel. So, I set a variable to 0 and only run unslick after it changed

The best way would be to use the unslick setting or function(depending on your version of slick) as stated in the other answers but that did not work for me. I’m getting some errors from slick that seem to be related to this.

What did work for now, however, is removing the slick-initialized and slick-slider classes from the container before reinitializing slick, like so:

Removing the classes doesn’t seem to initiate the destroy event(not tested but makes sense) but does cause the later slick() call to behave properly so as long as you don’t have any triggers on destroy, you should be good.

I was facing an issue where the Slick carousel wasn’t refreshing on new data instead it was appending new slides to the previous ones, I found a solution that solved my problem, it’s very simple.

TL;DR
Try passing unslick, then assign your new data which is being rendered inside slick carousel, and then initialize slick again. these were the steps for me:

Источник

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

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

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

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

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

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

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

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

Источник