Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slider content enlarged when page is loaded for a split second #4284

Open
fabianschultz opened this issue Jan 2, 2024 · 1 comment
Open

Comments

@fabianschultz
Copy link

short description of the bug / issue, provide more detail below.

========================================

Hi, I was looking for a slider option and the slick slider is really awesome!
I only have one slight issue:

I use the slider in a sidebar widget and when the page loads, each time for a split second the content inside is enlarged before it jumps to the normal size.

I want to display user avatars and they are shown (horizontally aligned) according tot he height dimensions set in CSS. However, when teh page is loaded/refreshed the first displayed user avatars grow out of proportion, pushing down the widget container and others below.

How can I prevent the initial (split second) enlarging of content/objects?

============================

============================

Things I tried tried are set max-height for widget/container/slider. It stops the other widgets to be pushed down further, yes. But inside the widget where I use slick slider still the user avatars are enlarged for a split second before they shrink/jump to the size they are supposed to be.

============================

============================

Do I need to use time delay for loading the slick slider content?

============================

@chimok
Copy link

chimok commented Feb 2, 2024

@fabianschultz This slider is not awesome and maybe never was? Its a over 10 years old piece of javascript with no future updates depending on jquery.

You could try to show only the first slide until the plugin is initialized.

.gallery > .slide:not(:first-child) {
    display: none;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants