<style>

body {
background-color: #0d0d0d;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
overflow: hidden;
}

.swiper {
width: 100%;
max-width: 1000px;
padding-top: 80px;
padding-bottom: 90px;
}

.swiper-slide {
width: 320px;
height: 320px;
background-position: center;
background-size: cover;
border-radius: 4px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9);
/* Reflejo brillante inferior estilo iTunes */
-webkit-box-reflect: below 2px linear-gradient(transparent, transparent 65%, rgba(255, 255, 255, 0.3));
}

.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
}

/* Estilos para los botones de navegación */
.swiper-button-next, .swiper-button-prev {
color: rgba(255, 255, 255, 0.7);
}
.swiper-button-next:hover, .swiper-button-prev:hover {
color: #fff;
}
.swiper-pagination-bullet-active {
background-color: #fff;
}
</style>
</head>
<body>

<div class="swiper mySwiper">
<div class="swiper-wrapper">
<!-- Tus 7 u 8 imágenes -->
<div class="swiper-slide"><img src="https://picsum.photos/500/500?random=1" alt="Portada 1"></div>
<div class="swiper-slide"><img src="https://picsum.photos/500/500?random=2" alt="Portada 2"></div>
<div class="swiper-slide"><img src="https://picsum.photos/500/500?random=3" alt="Portada 3"></div>
<div class="swiper-slide"><img src="https://picsum.photos/500/500?random=4" alt="Portada 4"></div>
<div class="swiper-slide"><img src="https://picsum.photos/500/500?random=5" alt="Portada 5"></div>
<div class="swiper-slide"><img src="https://picsum.photos/500/500?random=6" alt="Portada 6"></div>
<div class="swiper-slide"><img src="https://picsum.photos/500/500?random=7" alt="Portada 7"></div>
<div class="swiper-slide"><img src="https://picsum.photos/500/500?random=8" alt="Portada 8"></div>
</div>

<!-- Controles -->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
const swiper = new Swiper(".mySwiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
loop: false, // SIN scroll infinito: tiene primer y último disco definido
coverflowEffect: {
rotate: 50, // Inclinación 3D de las pilas laterales (igual que iTunes)
stretch: -35, // Distancia/apilamiento lateral entre las portadas
depth: 220, // Profundidad hacia atrás de las pilas laterales
modifier: 1, // Intensidad del efecto
slideShadows: true // Sombra de perfil en cada disco apilado
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>

Comentarios

Publicar un comentario