¿Cómo hacer un carrusel en una landing de Clientify?

Para crear un carrusel (carousel) de imágenes en la landing de Clientify debemos seguir algunos pasos, pero antes debemos tener en cuenta que las imágenes deben estar alojadas en algún servidor web.

En caso de que las imágenes que quieras utilizar las tengas en tu equipo personal, puedes subirlas a los recursos de Clientify y generar un enlace para utilizarlo en las plantillas. ¿Cómo se debe hacer esto?

Primero vamos a recursos en la plataforma y hacemos clic en subir archivo

Tenemos una ventana como la siguiente, donde podemos arrastrar los archivos que vamos a necesitar, o simplemente podemos hacer clic para seleccionarlos desde nuestro equipo

una vez cargadas las imágenes generamos el URL

Bien ahora sabiendo esto vamos a construir el carrusel dentro de la landing page, para esto vamos a la parte de Diseño de la landing en donde vamos a arrastrar dos bloques HTML, uno para añadir los estilos y otro para añadir el carrusel con nuestras imágenes

Luego de arrastrar el primer bloque aparecerá algo así, en donde vamos a copiar el código para los estilos


<style>
    * {
    box-sizing: border-box;
    }

    body {
      max-width: 1440px;
      margin: auto;
    }

    .slider-wrapper {
      margin: 1rem;
      position: relative;
      overflow: hidden;
    }

    .slides-container {
      height: calc(50vh - 2rem);
      width: 100%;
      display: flex;
      overflow: hidden;
      scroll-behavior: smooth;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .slide-arrow {
      position: absolute;
      display: flex;
      top: 0;
      bottom: 0;
      margin: auto;
      height: 4rem;
      background-color: white;
      border: none;
      width: 2rem;
      font-size: 3rem;
      padding: 0;
      cursor: pointer;
      opacity: 0.5;
      transition: opacity 100ms;
      z-index: 999;
    }

    .slide-arrow:hover,
    .slide-arrow:focus {
      opacity: 1;
    }

    #slide-arrow-prev {
      left: 0;
      padding-left: 0.25rem;
      border-radius: 0 2rem 2rem 0;
    }

    #slide-arrow-next {
      right: 0;
      padding-left: 0.75rem;
      border-radius: 2rem 0 0 2rem;
    }


.slide {
  flex: 1 0 100%;
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  
}

.slide img{
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .5s;
  position: relative;
}

.slide img.active {
  opacity: 1;
} 

</style>

Una vez copiado los estilos vamos a crear nuestro carrusel, para esto utilizaremos el 2.º bloque HTML debajo del que ya hemos creado previamente.

Para esto hacemos el mismo procedimiento anterior utilizando el código siguiente:

<section class="slider-wrapper">
    <button class="slide-arrow active" id="slide-arrow-prev">
      &#8249;
    </button>
    <button class="slide-arrow active" id="slide-arrow-next">
      &#8250;
    </button>
    <ul class="slides-container" id="slides-container">
      <li class="slide">
        <img class="active" src="" alt="">
      </li>
      <li class="slide">
        <img class="" src="" alt="">
      </li>
      <li class="slide">
        <img class="" src="" alt="">
      </li>
    </ul>
  </section>

Bien, ya con esto tenemos la base de nuestro carrusel, pero hay que agregar nuestras imágenes.

Con el código base, el carrusel permite 3 imágenes, pero puedes agregar las que quieras o dejar solo dos imágenes si es lo que deseas, para esto te explicaré como debes modificar para ajustarlo a tu preferencia

Cada imagen está dentro de las etiquetas

<li class="slide">
        <img class="active" src="" alt="">
</li>

Como ves la primera tiene un atributo class="active" este atributo se debe dejar solo en la primera imagen, en el resto de imágenes no debe llevarlo.

Para añadir el enlace de nuestra imagen vamos a modificar dentro de esa etiqueta el atributo src y añadiremos nuestro enlace de la siguiente manera

src="https://d25ltszcjeom5i.cloudfront.net/128300/xezjihsfsw/lake_image_1.jpg"

con esto la etiqueta nos quedaría de la siguiente manera:

<li class="slide">
        <img class="active" src="https://d25ltszcjeom5i.cloudfront.net/128300/xezjihsfsw/lake_image_1.jpg" alt="">
</li>

Como se puede ver también hay una etiqueta alt="" esta etiqueta es muy importante para el SEO de nuestra página, dentro de ella escribiremos un texto que haga una descripción relacionada a nuestra imagen y con esto ya tendriamos nuestra imagen cargada, solo quedaría ir añadiendo tantas imágenes como deseamos tener en nuestro carrusel. (Recuerda solo la primera imagen debe llevar class="active")

Hecho todo esto, ya solo nos queda darle vida a nuestro carrusel, es decir, hacer que este cambie las imágenes por sí solo, y que además podamos utilizar las flechas a los lados para cambiar las imágenes manualmente.

Para esto vamos a guardar el diseño de nuestra landing, y pasaremos a la última parte de nuestra, es decir, el paso 4, donde vamos a añadir el Script que necesitamos

Una vez en el paso 4 de la creación de landing vamos a ubicar el apartado de "Custom Scripts"

y vamos a pegar el siguiente código

<script>
    const slidesContainer = document.getElementById("slides-container");
    const slide = document.querySelector(".slide");
    const prevButton = document.getElementById("slide-arrow-prev");
    const nextButton = document.getElementById("slide-arrow-next");
    
    let allSlide = document.querySelectorAll(".slide img")
    let current_index = 0;

    nextButton.addEventListener("click",()=>{
      allSlide[current_index].classList.remove('active')
      current_index++;
      if (current_index >= allSlide.length) current_index = 0; 
      allSlide[current_index].classList.add('active');
    })

    prevButton.addEventListener("click", ()=>{
      allSlide[current_index].classList.remove('active')
      current_index--;
      if (current_index < 0) current_index = allSlide.length-1;
      allSlide[current_index].classList.add('active');
    })

    function changeImage(){
      
      allSlide[current_index].classList.remove('active')
      current_index++;
      
      if(current_index >= allSlide.length){current_index=0;}

      allSlide[current_index].classList.add('active');
      console.log(allSlide)
      console.log(current_index)
    }

     setInterval(changeImage, 5000);
    
  </script>

Con esto las imágenes cambiarían solas cada 5 segundos, pero si quieres alargar este tiempo bastaría con modificar el código antes de pegarlo

Casi al final verás una función que se llama setInterval(changeImage, 5000)

Solo deberás cambiar el valor de 5000, por el valor que prefieras. Cada segundo tiene un valor de 1000 milisegundos.

Ahora si lo que prefieres, es que las imágenes no se cambien solas, y sea de forma manual a través de las flechas puedes borrar del código la línea setInterval(changeImage, 5000) y de esta manera quedaría solo de forma manual. Recuerda que si no la eliminas puedes utilizar ambos métodos, es decir, cambiar utilizando los botones de las flechas y que se cambie de forma automática, según los segundos establecidos.

Una vez hechos todos estos pasos al darle guardar ya quedaría tu landing page hecha en Clientify, con el carrusel funcionando.