Hi, Is that possible to add different stop by delay in each slide ?
i have some charts which take much time to read and some take less time ; So i want it configurable.

You could set slick autoplay to false and use custom javascript code to change to the next slide

// use this to get the current slide so you know how much time to wait
$('.your-element').slick('slickCurrentSlide');

// use this to go to the next slide whenever you want
$('.your-element').slick('slickNext');

dobs Ruyir qerdfat

add parameter displayTime to every div in slick and then add procedure timeout in your custom js.... (i don't have script, but i would do it like that)

yes

Is there any possibility to add deep-linking to an individual slide?

Not sure what deep-linking means but if you mean the ability to go to a slide by clicking on a link inside another slide, here is what you can do :
1. add a data attribute to your slides (e.g data-slide-id)
2. add a data attribute to the link inside your slide (e.g. data-go-to)
3. when an user clicks on a link inside a slide, check if the link contains the data attribute "go-to", if so, find the slide that has the same id and get its index, then use "slickGoTo" to go to this slide.

Hi there.
I'm using slick in my vue js project.
Having some troubles.
When slick is cloning elements can't clone event listeners. How to keep events of elements?

Did u find a solution ?

How to make slider syncing
slides didn't move in the second carousel? To make them look like tabs, like here http://jellywp.com/theme/di...

Hi, also same problem. Did you find solution?

I found solution, you need to add simple code in CSS as
.slider-nav .slick-list .slick-track {
transform: translate3d(0px, 0px, 0px) !important;
}

Thanks for the solution that worked for me after 3 years

Hi there, not sure if you found yourself an answer or not (or if I'm understanding your questions correctly), but I have custom arrows being used on a slider, which on the click event I bound the previous slide or next slide event, see example below.

$('.slick-prev').on('click', function(){
$('.c-testimonial-slider__previous-slide').slick('slickPrev');
$('.c-testimonial-slider__next-slide').slick('slickPrev');
});

$('.slick-next').on('click', function(){
$('.c-testimonial-slider__previous-slide').slick('slickNext');
$('.c-testimonial-slider__next-slide').slick('slickNext');
});

Hi,
how can I add Text under or on side of image?

Create a Wrapper Div for image, Include both you image and text in that div

Hi, It's seems slick has a trouble with set height 100% for all slide-items. I must to use javascript to set height for them. It's a problem or not support ? Please help me to resolve it.

Hi there, I had a similar problem, slick adding extra space at the bottom of my images on Chrome (not safari).

To fix it, I set the '.slick-slide' wrapper to 'display: block; float: left' - then set the element inside of the wrapper (in my case a span) to 'display: block !important' - as the plug in seemed to be forcing them to display as inline-block elements.

This fixed my issue, I hope it helps you!

adaptiveHeight: true

Hello! How to deal with Cumulative Layout Shift? Slick Slider makes alot of CLS and does not meet Google Core Vitals. Thank you

You can apply a min-height to the container upon which slick.js is being initialized.

If you have a fixed-width/fixed-height slideshow, that is straightforward, but I have a responsive-width slideshow equal to the viewport width, so I had to get creative.

Here is a fix I was able to come up with for my particular implementation, in which the overall width of the slideshow is responsive, so the height of the slideshow varies. It uses CSS calc() to set a min-height on the slideshow. Obviously, it won't work in older browsers that do not support calc(), but should work for most users these days.

I applied this style to the container that holds the images and upon which slick.js is being initialized:

min-height: calc(([slideshow width] / [slides shown]) / [image-width-to-height-ratio]) + 4px);

This solution relies on knowing the total width of the slideshow, how many slides are displayed, and the width/height ratio of the images.

In my case, the slideshow is the full width of the viewport (100vw), there are three slides shown at desktop widths, and the image ratio is 1641/1000 (or 1.641). Finally, I noted that slick seems to be adding four pixels to the height of the div it wraps each image in (not sure if this is true, or I just have something in my CSS that is doing this but I can't isoluate), so I'm adding 4px to the calculation.

So my CSS is:
min-height: calc(((100vw / 3) / 1.641) + 4px);

Obviously, you'll need to figure out your own values, and this only works if you have consistently-sized image proportions.

Also, if you have media queries in the slick init config that change the number of slides shown at different viewport widths, you'll need to have matching CSS media queries.

As I said, if you are setting a fixed height for the slideshow, then that's all you would need. You would not need to use calc() at all.

Hope this is helpful.
Fritz

Trying to solve this very issue. This is a big deal now.

Slick is not displayed in Safari and i can't fix it.
It seems like a big problem for us!!!

Any solution for this??

Any solution for this?

Works fine work me.

deun?

My slick slider is not working in firefox - the widths of the slides are being set to huge numbers. Works perfectly in chrome and safari. Has anyone experienced this?

If you already have the "float" CSS property set for the slide DIVs, try removing that. This was the issue that caused that symptom for me..

Hi, how can I hide the cut-slides? I want to show only the whole-ones?

Hi, did you find solution?

Thank you for creating this plugin!
What's the easiest way to change the color of the arrows?

You can change it in slick-theme.css >.slick-prev:before, .slick-next:before class.

Hello!
Is these a way to combine it with something like lightbox?
I want to scroll mini-images, then zoom them on click. Is that posible?

Is it possible to make slides that are off-screen invisible?

Hi, how do I change the background color of the slider arrows, the slick-next and slick arrow??

Add your own color to this:

.slick-prev:before,
.slick-next:before {
color: black;
}


Hi, My Slick slider is not working in Ajax Tabs, Only first slider working fine on other tabs slider slider not working. Can you please find any solution for that.
Thanks

why arrows and dots does not showing?

$(".news-blocks").slick({
slidesToShow: 3,
slidesToScroll: 3,
});

this works for me:

$('#karuselMnenjaS1, #karuselMnenjaS2').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
centerMode: false,
variableWidth: false,
autoplay: true,
autoplaySpeed: 5000
});

Hi, do you have the decision to this problem? It would be very much help to me. When I indicate the number of slides to show - the buttons just disappear.

Does not work for me either. Does anyone know how to make the arrows show?

add slick theme css link and it will show
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jq...">


.slick-prev:before,
.slick-next:before {
color: black;
}

Add this in your styles

When browsing through this board it seems Slick is dead. Many requests for help but practically nobody bothers to answer.

That has nothing to do with it being dead and more with how any good piece of software that is made publicly available at no cost, attracts endless requests and questions for help, most of them dumb and pointless. For most questions here, a bot replying with "Have you tried reading documentation/MDN?" would suffice.
Then again, even for the few legitimate questions, this is hardly a good platform for any troubleshooting or to learn stuff. Go to stackoverflow.com instead - which will most likely and rightfully tell you, that the question asked has almost certainly been asked before and also answered, if one had bothered to look for the answer instead of blindly demanding help.

Just discovered that it's Slick that powers most of the Disney Plus browser UI. Crazy!

Doesn’t work responsive breakpoints in google chrome browser in dev consol

I had a problem with responsive.
This problem was solved by indicating the parameters in meta are the same as on the site slisk.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
In my case, I didn’t have enough of this
user-scalable=0

Thanks for this one mate.