Control deslizante/swiper.js

3,164 Andev.web

Abrir en el editor Publica tu código

Recomendado

14 September 2024

Carrusel de portafolios con controles deslizantes sincronizados

19 October 2025

Transformación de formas de partículas con controles en Three.js

28 October 2025

Ejemplo de control deslizante de blog de Swiper

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://images.unsplash.com/photo-1432139555190-58524dae6a55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=876&q=80" alt="Grilled steak with vegetables" />
      <div>
        <h2>Grilled steak with vegetables</h2>
      </div>
    </div>
    <div class="swiper-slide">
      <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=481&q=80" alt="Pizza" />
      <div>
        <h2>Pizza</h2>
      </div>
    </div>
    <div class="swiper-slide">
      <img src="https://images.unsplash.com/photo-1482049016688-2d3e1b311543?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=410&q=80" alt="Sandwich with boiled egg" />
      <div>
        <h2>Sandwich with boiled egg</h2>
      </div>
    </div>
    <div class="swiper-slide">
      <img src="https://images.unsplash.com/photo-1484723091739-30a097e8f929?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=449&q=80" alt="Toast bread with blueberry" />
      <div>
        <h2>Toast bread with blueberry</h2>
      </div>
    </div>
    <div class="swiper-slide">
      <img src="https://images.unsplash.com/photo-1481070555726-e2fe8357725c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=435&q=80" alt="Chicken burger" />
      <div>
        <h2>Chicken burger</h2>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap");

html,
body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.swiper {
  max-width: 50%;
  overflow: visible;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
}

.swiper-slide::after {
  position: absolute;
  content: "";
  inset: 0;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: linear-gradient(to bottom right, #b8b8b88f, #ffffff5e);
}
.swiper-slide-active::after {
  background: none;
}
.swiper-slide > div {
  text-align: center;
  display: none;
  opacity: 0;
}
.swiper-slide-active div {
  display: block;
  opacity: 1;
}

.swiper-slide h2 {
  font-size: 1.2rem;
  font-family: "Libre Baskerville", serif;
  position: relative;
}

.swiper-slide h2::after {
  position: absolute;
  content: "";
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  background: linear-gradient(#e66465, #9198e5);
}

@keyframes line {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.swiper-slide-active h2::after {
  animation: line 0.5s linear forwards;
}
.swiper-slide img {
  display: block;
  width: 100%;
  object-fit: cover;
  box-shadow: 0px 3px 17px rgb(0 0 0 / 25%);
  border-radius: 50%;
  aspect-ratio: 1/1;
}

@media (min-width: 768px) {
  .swiper-slide h2 {
    font-size: 2rem;
  }
}