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)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</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>
