Carrusel (HTML avanzado)
Carrusel
Los carruseles del sitio web se generaran automaticamente utilizando la estructura de tipo "Carrusel" y categorizandola. Pero dado que disponemos del HTML necesario para generar dichas herramientas automáticas lo ponemos a vuestra disposición para que podais integrarlo en cualquier contenido web.
Carrusel con 4 diferentes posibilidades:
- Título con fondo blanco y botón blanco.
- Título con fondo negro y botón negro.
- Título con fondo blanco y texto blanco.
- Título con fondo blanco y texto negro.
Copiar
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/documents/20182/30618/carrusel/242956ac-a720-44de-a17e-6f30f656e66e" alt="">
<span class="carrusel-title-wrapper">
<span class="carrusel-title carrusel-title-2x">Lorem ipsum dolor ipsum sit dolor 1</span>
</span>
<div class="swiper-slide-footer">
<a href="#" class="botoia botoia-negatiboa">Más información</a>
</div>
</div>
<div class="swiper-slide swiper-slide-negatiboa">
<img src="/documents/20182/30618/carrusel/242956ac-a720-44de-a17e-6f30f656e66e" alt="">
<span class="carrusel-title-wrapper">
<span class="carrusel-title carrusel-title-2x">Lorem ipsum dolor ipsum sit dolor 2</span>
</span>
<div class="swiper-slide-footer">
<a href="#" class="botoia">Más información</a>
</div>
</div>
<div class="swiper-slide">
<img src="/documents/20182/30618/carrusel/242956ac-a720-44de-a17e-6f30f656e66e" alt="">
<span class="carrusel-title-wrapper">
<span class="carrusel-title carrusel-title-2x">Lorem ipsum dolor ipsum sit dolor 3</span>
</span>
<div class="swiper-slide-footer">
<p><strong>Lorem ipsum dolor sit amet</strong></p>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="swiper-slide swiper-slide-negatiboa">
<img src="/documents/20182/30618/carrusel/242956ac-a720-44de-a17e-6f30f656e66e" alt="">
<span class="carrusel-title-wrapper">
<span class="carrusel-title carrusel-title-2x">Lorem ipsum dolor ipsum sit dolor 4</span>
</span>
<div class="swiper-slide-footer">
<p class="textu-negatiboa"><strong>Lorem ipsum dolor sit amet</strong></p>
<p class="textu-negatiboa">Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="swiper-button-next">&bsp;</div>
<div class="swiper-button-prev">&bsp;</div>
</div>
Cuando un carrusel tiene solo un elemento (botón en este caso) no debemos colocar los manejadores.
Copiar
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/documents/20182/30618/carrusel/242956ac-a720-44de-a17e-6f30f656e66e" alt="">
<span class="carrusel-title-wrapper">
<span class="carrusel-title carrusel-title-2x">Lorem ipsum dolor ipsum sit dolor</span>
</span>
<div class="swiper-slide-footer">
<a href="#" class="botoia botoia-negatiboa">Más información</a>
</div>
</div>
</div>
</div>
Cuando un carrusel tiene solo un elemento (texto en este caso) no debemos colocar los manejadores.
Copiar
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/documents/20182/30618/carrusel/242956ac-a720-44de-a17e-6f30f656e66e" alt="">
<span class="carrusel-title-wrapper">
<span class="carrusel-title carrusel-title-2x">Lorem ipsum dolor ipsum sit dolor 3</span>
</span>
<div class="swiper-slide-footer">
<p><strong>Lorem ipsum dolor sit amet</strong></p>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
Ejemplos de carruseles en varias columnas. Notese el diferente tamaño de los textos. No se aplica el class "carrusel-title-2x".