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

How to integrate a toggle switch into an Angular datepicker component

Ensure an element stays in its position relative to another element by utilizing the CSS property "position: absolute"

Tips for maintaining the footer at the bottom of the page regardless of the screen size

Trigger a fixed bottom bar animation upon hover

Tips for integrating CSS keyframes in MUI v5 (using emotion)

One click wonder: Easily print any webpage content with just the click of a button!

JQuery cannot target content that is dynamically inserted through an Ajax request

A lesson is what I'm seeking, as I face an Uncaught TypeError: Unable to locate the property 'split' of an undefined value

Tips for creating a clickable textbox

Function does not initiate BlueImp fileupload

Display all active ajax/http requests using Javascript or JQuery

looking to change the background color of a CSS element

How to Use CSS to Align an Image in a Header

Is there a way for me to perfectly align the image and the h1 header on the webpage?

How can I modify the border color of a Material Ui TextField component?

Retrieve the initial identification number from a sorted list using Jquery UI Sortable

Transitioning the color of links in Firefox causes flickering when switching between the hover and visited state

Long pressing on text in iOS fails to display the 'copy' button on jQueryMobile Dialogs if ajax is being employed

The issue of Ajax failing to send POST variables to a specified URL

The order in which jQuery is loaded can impact the layout of