Slick Carousel Blank

I set up an overlay slick carousel, so when you click on the image a larger carousel appears with the selected image as the initialSlide. However, Slick carousel is adding several

Solution 1:

The Jquery attr() function returns a string value. When you pass that into the slick constructor function it translates it to a different number.

Adding a simple Number() function to change the index to numeric should solve your problem. Just place the following middle line between the lines I placed it:

var index = $(this).attr("data-slick-index");
index = Number(index);
$(".overlay-carousel-container").css("display", "block");

Solution 2:

This answer is for the people who are struggling slick carousal as I also faced a lot of problem with it, even though it seems very easy as mentioned but I found out that it has lots limitation.

1. Very old
2. To have exact same look like mentioned it needs CSS(SCSS) which is difficult to do in development which as a new user I realised it quite late. Or you don't get dots and arrows with the same exact look easily.
3. Several other issues like the one mentioned here and other I found over stack flow.

The best one I resorted to for similar process is the one mentioned here it's latest and comes with a simple tutorial as well

Recommended for new beginner developers.