CODEWITHSUNDEEP
jquerycarouselslick.js
mtelford
mtelford

Reputation: 25

Slick Carousel Blank Slides

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 blank slides after the initialSlide. Does anyone know why? Also, how can I restart the overlay carousel upon close?

    $("#sync1 .item").on("click", function() {

        var index = $(this).attr("data-slick-index");
        $(".overlay-carousel-container").css("display", "block");
        $("body").css("overflow", "hidden");
        $("#overlayCarousel").slick({
          slidesToShow: 1,
            fade: true,
            initialSlide: index,
            focusOnSelect: true
        }); 
    })
<div class="overlay-carousel-container">
    <a class="close">&nbsp;</a>
        <div class="overlay-wrapper">
                <div class="overlay-img-wrapper"> 
                    <div class="overlay-carousel-nav" id="overlayCarousel">

                        <div class="overlay-slider-img"><img src="img/apparel/1.jpg"></div>
                        <div  class="overlay-slider-img"><img src="img/apparel/2.jpg"></div>
                        <div  class="overlay-slider-img"><img src="img/apparel/3.png"></div>
                        <div  class="overlay-slider-img"><img src="img/apparel/4.jpg"></div>
                        <div  class="overlay-slider-img"><img src="img/apparel/5.jpg"></div>
                        <div  class="overlay-slider-img"><img src="img/apparel/6.jpg"></div>
                        <div  class="overlay-slider-img"><img src="img/apparel/7.png"></div>


                    </div>  
                </div>
        </div>  
</div>

Upvotes: 2

Views: 2765

Answers (1)

Asaf David
Asaf David

Reputation: 3297

In order to restart your overlay slider I suggest you "kill" it when the user closes it. This way the onclick will build it again with the relevant index slide.

Just add the following to the overlay close event:

$("#overlayCarousel").slick("unslick");

Please notice that asking 2 questions in one post is not allowed here. Also it's better adding a JSfiddle with your code so we can try figure out what went wrong. So I think it's best you open a new question with a full code example and leave edit this question to address only the one i've tried solving for you.

Upvotes: 0

Related Questions