Conceal the Slider until Fully Loaded with Slick Slider by Ken Wheeler

Question

Conceal the Slider until Fully Loaded with Slick Slider by Ken Wheeler

I am currently using a slider function called Slick by Ken Wheeler. It is currently being loaded in the footer with just two variables.

        $('.slickSlider').slick({
              dots: true,
              fade: true
        });

Currently, I am facing an issue with the ready functionality of jQuery where everything breaks until jQuery is fully loaded. Is there a way to hide the slider or resolve this issue so that it either loads first or doesn't load anything until all assets are fully loaded?

Thank you in advance.

jquery css jquery-plugins slider slick.js

Answer 1

Answer №1

Update

In the case that you need to ensure the document has fully loaded before running your script, you can use the following method:

$(document).ready(function() {
    $('.customSlider').slick({
        arrows: true,
        autoplay: true
    });

    $('.customSlider').fadeIn();
});

Here is the CSS code:

.customSlider {
    display: none;
}

This solution assumes that you have initially hidden your .customSlider using Display: None until it is revealed with jQuery for better user experience.

Answer 2

Update

In the case that you need to ensure the document has fully loaded before running your script, you can use the following method:

$(document).ready(function() {
    $('.customSlider').slick({
        arrows: true,
        autoplay: true
    });

    $('.customSlider').fadeIn();
});

Here is the CSS code:

.customSlider {
    display: none;
}

This solution assumes that you have initially hidden your .customSlider using Display: None until it is revealed with jQuery for better user experience.

Answer 3

Answer №2

.carousel { display: none; }
.carousel.slick-initialized { display: block; }

This is the most efficient method.

Answer 4

.carousel { display: none; }
.carousel.slick-initialized { display: block; }

This is the most efficient method.

Answer 5

Answer №3

To hide your slider element, assign a class and set it to display:none. In your stylesheet, include:

.slick-initialized{ 
    display: block 
}

For a smoother effect, consider adding opacity:0 to your slider element class, followed by

.slick-initialized{
    opacity:1;
    transition:opacity .3s ease-out;
}

in the CSS.

Answer 6

To hide your slider element, assign a class and set it to display:none. In your stylesheet, include:

.slick-initialized{ 
    display: block 
}

For a smoother effect, consider adding opacity:0 to your slider element class, followed by

.slick-initialized{
    opacity:1;
    transition:opacity .3s ease-out;
}

in the CSS.

Answer 7

Answer №4

Instead of relying on .show() or .slick-initialized, I prefer not to use them as they are dependent on third-party scripts which may change. I observed that the source code appears like this:

<div id="main-slider-whatever">
    <div>
        <a href="">
            <img src="1.jgp />
        </a>
    </div>
    <div>
        <a href="">
            <img src="2.jgp />
        </a>
    ...
</div>

Slick adds numerous wrappers around images, so I included the following CSS in my stylesheet:

#main-slider-whatever>div>a>img {
    display: none;
}

This CSS rule specifically targets and hides images when they are direct children of the container without any extra slick classes added post initialization.

Answer 8

Instead of relying on .show() or .slick-initialized, I prefer not to use them as they are dependent on third-party scripts which may change. I observed that the source code appears like this:

<div id="main-slider-whatever">
    <div>
        <a href="">
            <img src="1.jgp />
        </a>
    </div>
    <div>
        <a href="">
            <img src="2.jgp />
        </a>
    ...
</div>

Slick adds numerous wrappers around images, so I included the following CSS in my stylesheet:

#main-slider-whatever>div>a>img {
    display: none;
}

This CSS rule specifically targets and hides images when they are direct children of the container without any extra slick classes added post initialization.

Answer 9

Answer №5

Implemented a clever concept from @vladkras

To eliminate Cumulative Layout Shift (CLS) with just one image:

.carousel>div:not(:first-child)>img {
    display: none;
}

Showcasing only the initial image enables slick to include arrows and carousel features.

Answer 10

Implemented a clever concept from @vladkras

To eliminate Cumulative Layout Shift (CLS) with just one image:

.carousel>div:not(:first-child)>img {
    display: none;
}

Showcasing only the initial image enables slick to include arrows and carousel features.

Answer 11

Answer №6

Have you considered utilizing the document.ready function in your code?

$(document).ready(function(){
   $('.carousel').slick({
        dots: true,
        fade: true
    });

    $('.carousel').show();
});

It's a concise and effective solution!

Answer 12

Have you considered utilizing the document.ready function in your code?

$(document).ready(function(){
   $('.carousel').slick({
        dots: true,
        fade: true
    });

    $('.carousel').show();
});

It's a concise and effective solution!

Conceal the Slider until Fully Loaded with Slick Slider by Ken Wheeler

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Glitchy/Crazy CSS3 Animations

Clear all CSS styles applied to a targeted division

Developing HTML5 animation by utilizing sprite sheets

Maintain the image's aspect ratio by setting the width equal to the height when the height is

Receiving 'Unexpected end of input' error when using a string as a JavaScript function argument

Leveraging two AJAX requests within a single function

Ways to eliminate excessive spacing between grid blocks

FullCalendar dayClick event fails to trigger any action

Tips for setting extra field values in the CKEditor image dialog during editing

Is it possible to employ a method to eliminate a specific valuable element 'this' from an array?

Ways to ensure even spacing in a responsive header design

Having trouble with numbers appearing in Dropdown instead of letters while looping through

Struggling with passing custom headers in Rails, jQuery, and Ajax interactions

Switching between vertical and horizontal div layouts while reorganizing text fields within the top div

When using JQuery Ajax in Chrome, the request method defaults to GET instead of POST. However, in Edge, the request

Exploring the `zoom` CSS attribute and adjusting font sizes on Safari

Place the element at the bottom of the row above

Include jQuery, jQuery UI, and plugins seamlessly to avoid any version conflicts

The CSS file is not connecting properly despite being located within the same directory

Center an absolutely positioned div using CSS