akiran / akiran/react-slick

Cumulative Layout Shift

Offen
#2,091 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
JavaScript
Sterne
11.9k
Forks
2.1k
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

How we could avoid Cumulative Layout Shift?
I have a carousel in my web page. I am getting bad CLS score because elements on the carousel is changing size over page load.
![image](https://user-images.githubusercontent.com/18173423/137067724-a36fd2ff-091c-4056-ab52-ca83de355fe1.png)
![image](https://user-images.githubusercontent.com/18173423/137067758-59459398-ffb3-42f5-9535-9bbbe21ed42c.png)

I am using this settings
```
{
dots: false,
infinite: true,
slidesToShow: 5,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
nextArrow: ,
prevArrow: ,
responsive: [
{
breakpoint: 1280,
settings: {
slidesToShow: 4,
},
},
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
},
},
],
}
```

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.