Carrusel
Potencia tu sitio web con el nuevo Carrusel CSS de Quickly: Presentación dinámica y cautivadora en solo unos clics.
Carrusel estandar
Descubre nuestra versátil solución de Carrusel CSS con Javascript, meticulosamente diseñada para integrarse sin complicaciones en cualquier diseño web. Se adapta con fluidez a su contenedor, ofreciendo una forma estándar y elegante de resaltar dinámicamente el contenido de tu sitio web. Una de sus características distintivas es la capacidad de activarse automáticamente al agregar la clase "auto-play", o bien, de disfrutarlo manualmente al eliminar dicha clase. Además, este carrusel se detendrá automáticamente cuando detecte el mouse sobre él, reanudándose después de retirarlo.
Actualización Se corrigió un error del carrusel en Safari, pero no te preocupes: no tendrás que hacer nada y todo seguirá funcionando como antes, ya que todo el trabajo se realizó bajo el capó. 😉
<div id="carousel-container" class="carousel-container auto-play">
<div class="carousel" id="carouselId">
<div class="carousel_item" id="item1">
<img src="../img/16-9.webp" alt="Imagen uno" class="img-fluid hide-s"/>
<img src="../img/1-1.webp" alt="Imagen uno" class="img-fluid hide show-s"/>
<div class="caption-carousel text-al">
<h2 class="font-l">Título</h2>
<p class="mb-2">Texto párrafo de relleno para la diapositiva.</p>
<div class="mmb-5">
<button class="btn btn-secondary hide-s">Botón secondary</button><button class="btn btn-primary pmb-5">Botón primary</button>
</div>
</div>
</div>
<div class="carousel_item" id="item2">
<img src="../img/16-9.webp" alt="Imagen dos" class="img-fluid hide-s"/>
<img src="../img/1-1.webp" alt="Imagen dos" class="img-fluid hide show-s"/>
<div class="caption-carousel text-ac">
<h2 class="font-l">Título</h2>
<p class="mb-2">Texto párrafo de relleno para la diapositiva.</p>
<div class="mmb-5">
<button class="btn btn-secondary hide-s">Botón secondary</button><button class="btn btn-primary">Botón primary</button>
</div>
</div>
</div>
<div class="carousel_item" id="item3">
<img src="../img/16-9.webp" alt="Imagen tres" class="img-fluid hide-s"/>
<img src="../img/1-1.webp" alt="Imagen tres" class="img-fluid hide show-s"/>
<div class="caption-carousel text-ar">
<h2 class="font-l">Título</h2>
<p class="mb-2">Texto párrafo de relleno para la diapositiva.</p>
<div class="mmb-5">
<button class="btn btn-secondary hide-s">Botón secondary</button><button class="btn btn-primary">Botón primary</button>
</div>
</div>
</div>
<div class="carousel_item" id="item4">
<img src="../img/16-9.webp" alt="Imagen cuatro" class="img-fluid hide-s"/>
<img src="../img/1-1.webp" alt="Imagen cuatro" class="img-fluid hide show-s"/>
<div class="caption-carousel text-ar">
<h2 class="font-l">Título</h2>
<p class="mb-2">Texto párrafo de relleno para la diapositiva.</p>
<div class="mmb-5">
<button class="btn btn-secondary hide-s">Botón secondary</button><button class="btn btn-primary">Botón primary</button>
</div>
</div>
</div>
</div>
<div class="carousel-buttons">
<button id="button-left" class="button ml-2" aria-label="Botón de desplazamiento izquierdo">
<svg class="ico-16 ico-white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
<path d="M20 .755l-14.374 11.245 14.374 11.219-.619.781-15.381-12 15.391-12 .609.755z"/>
</svg>
</button>
<button id="button-right" class="button mr-2" aria-label="Botón de desplazamiento derecho">
<svg class="ico-16 ico-white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
<path d="M4 .755l14.374 11.245-14.374 11.219.619.781 15.381-12-15.391-12-.609.755z"/>
</svg>
</button>
</div>
</div>