akiran / akiran/react-slick

Cumulative Layout Shift

Abierto
#2,091 1 comentario 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
JavaScript
Estrellas
11.9k
Forks
2.1k
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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,
},
},
],
}
```

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.