Slick: Slider hide and show

[hadilnc01]

I've noticed over the years that the slider cannot be initialized on hidden HTML. The solution has always been to show the HTML and then initiate the slick slider. However, this means that the HTML is shown first with the slides on top of each other before the slider's initiation. We've been receiving a lot of complaints about this. I was wondering if slick has a workaround to solve this?

[FranCoulibaly]

Can you show an example of your code?

[hadilnc01]

Hello @FranCoulibaly

If you open this website http://zeinpieces.me/ and hover over the "Collections" menu item, you will see how all the images show on top of each other before being turned into a slider.

The reason for this is because I can't initiate a slider on hidden items. So, I have to show the items and then initiate the slick slider.

Is there a workaround for this? I'm not sure how helpful the code is but here it is:

var collections_dropdown = function() {
        var dropdown_element = $(".category-dropdown");

        $(".collections-hover").hover(function() {
            if(dropdown_element.hasClass('closed')) {
                dropdown_element.fadeIn(function() {
                    if(!$("#collections-submenu-slider").hasClass("slick-initialized")) {
                        collections_dropdown_slider();
                    }
                });
                dropdown_element.removeClass('closed');
                dropdown_element.addClass('open');
            }
        }, function() {
            if(dropdown_element.hasClass('open')) {
                dropdown_element.fadeOut(function() {
                    $("#collections-submenu-slider").slick('unslick');
                });
                dropdown_element.removeClass('open');
                dropdown_element.addClass('closed');
            }
        });
    };

    function collections_dropdown_slider() {
        $("#collections-submenu-slider").slick({
            prevArrow: $(".slider-arrow-left"),
            nextArrow: $(".slider-arrow-right"),
            slidesToShow: 6,
            slidesToScroll: 1,
            responsive: [
                {
                    breakpoint: 991,
                    settings: {
                        slidesToShow: 4
                    }
                }
            ]
        });
    }

[hadilnc01]

Hi @FranCoulibaly

Sorry for the late reply but the carousel I had an issue with was removed from the design of the website I was working on. However, I'm facing the same issue now here: http://html.zeinpieces.me/behind-the-brand.php

Please click on the "bag" icon in the header and see how the slider of items in the bag first displays vertically all the items before combining them into a slider. How can I initiate a hidden slider and have it appear normally when the slider is shown.

The code is below:
$("#your-bag-header-slider").slick({ prevArrow: $("#your-bag-header-slider-container .slider-arrow-left"), nextArrow: $("#your-bag-header-slider-container .slider-arrow-right"), autoplay: false, slidesToShow: 4, slidesToScroll: 1, dots: false, responsive: [ { breakpoint: 1200, settings: { slidesToShow: 3 } }, { breakpoint: 992, settings: { slidesToShow: 2 } } ] });

[FranCoulibaly]

Have you tried using $('.slick-slider').slick('refresh'); to refresh the slider when when you click on the bag icon?