Todas las colecciones
Marketing
Landing Pages
Como hacer un carrusel en una landing
Como hacer un carrusel en una landing
Victor Manuel Ospina avatar
Escrito por Victor Manuel Ospina
Actualizado hace más de una semana

A continuación, te enseñaremos como crear un carrusel para tu landing page.

Paso 1 - Insertar bloque html en donde se desea poner el carrousel y borrar su contenido completamente. Luego insertar este código.

<div class="slideshow-container">

 - Por cada imagen del slide insertar la siguiente línea sin los asteriscos


 <div class="mySlides6"><img src="url de la imagen" style="width:100%"></div>

- Reemplazar "url de la imagen" por la url directa del archivo. Si la imagen no está subida. La puedes subir siguiendo este video :

https://www.loom.com/share/daeb86ca88054ba29b3e8ac111c0fba6

 - Sugerimos que las imagenes tengan todas una altura igual o semejante.

 <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>
 <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
</div>

Paso 2: Incluir el script en el paso 4 "Caracteristicas" - > Custom Scripts de landing

<script>

var slideIndex = [1,1];

var slideId = ["mySlides1", "mySlides2"]

showSlides(1, 0);

showSlides(1, 1);

function plusSlides(n, no) {

showSlides(slideIndex[no] += n, no);

}

function showSlides(n, no) {

var i;

var x = document.getElementsByClassName(slideId[no]);

if (n > x.length) {slideIndex[no] = 1}

if (n < 1) {slideIndex[no] = x.length}

for (i = 0; i < x.length; i++) {

x[i].style.display = "none";

}

x[slideIndex[no]-1].style.display = "block";

}

</script>

Paso 3: Adicionar un bloque html entre el título del carrusel y el carrusel con el siguiente condigo:

<style>

{box-sizing: border-box}.mySlides1, .mySlides2,.mySlides3,.mySlides4,.mySlides5, .mySlides6, {display: none}img {vertical-align: middle;} .slideshow-container { max-width: 1000px; position: relative; margin: auto;} .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none;}.next { right: 0; border-radius: 3px 0 0 3px;}.prev:hover, .next:hover { background-color: #f1f1f1; color: black;}

<style>

¿Ha quedado contestada tu pregunta?