Skip to content

Instantly share code, notes, and snippets.

@Klerith
Created November 7, 2023 16:14
Show Gist options
  • Save Klerith/a2cc36d6c88693f656cbb47c211dd2ea to your computer and use it in GitHub Desktop.
Save Klerith/a2cc36d6c88693f656cbb47c211dd2ea to your computer and use it in GitHub Desktop.
CSS para el slideshow de TesloShop
.swiper-slide {
/* Center slide text vertically */
display: flex;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper {
width: 100%;
height: 900px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.mySwiper {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.mySwiper .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.mySwiper .swiper-slide-thumb-active {
opacity: 1;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@jgromerou
Copy link

Muchas gracias.

@daenerys973
Copy link

Thank u

@SoyRol4ndo
Copy link

Grande ese Fernand 😎. Un saludo

@gergg90
Copy link

gergg90 commented Jun 8, 2024

Disculpa Fernando, estoy intentando encontrar el className de mySwiper2 y no lo encuentro! Por cierto a la fecha de hoy swiper corrigió el error del thumb

@YanielFT
Copy link

YanielFT commented Jun 8, 2024

esta repetido =>
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment