Félix Gonzalo

Apoyar

13:59 min

Crea Slider Dinámicos en Webflow

En este tutorial de Webflow en español, va a aprender a crear un Slider en Webflow y un Carrusel, añadiendo contenido dinámico desde el CMS.

Actualmente no es posible hacer un Slider en Webflow añadiendo contenido del CMS, es por eso que tenemos que utilizar herramientas externas.

Código utilizado en el tutorial

El primer paso que debes de realizar es añadir el siguiente código en la pestaña <head> dentro de la página de Webflow:


<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<style>

.slick-dots {
		bottom:-70px;
}
.slick-dots li {
		width:10px;
}

.slick-dots li.slick-active button {
		opacity:.5;
}
.slick-dots li button {
		width:10px;
    height:10px;
    border-radius:10px;
    background-color:white;
}
.slick-dots li button:before {
		color:white;
    font-size:0px;
}

.slick-list {
    overflow: visible;
}

[aria-hidden="true"]{
	opacity: 0;
  transition: .3s;
}


</style>

Existen diferentes tipos de Slider, pero en este tutorial tienes 3 opciones que puedes desarrollar. Te dejamos el código que debes copiar a continuación.


1. Slider dinámico

Si deseas crear un Slider dinámico en Webflow, copia este código en before </body> .


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<script>

// Slider dinámico

$( document ).ready(function() {


$('.slider_collection-list').slick({
  dots: false,
  speed: 1000,
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  autoplay: true,
  autoplaySpeed: 2000,
  fade: true,
  cssEase: 'ease',
  responsive: [
    {
      // tablet
      breakpoint: 991,
      settings: {
        slidesToShow: 1
      }
    },
    {
      // mobile portrait
      breakpoint: 479,
      settings: {
        slidesToShow: 1
      }
    }
  ]
});

$('.cc-prev').click(function(){
    $(this).closest('.slider').find(".slider_collection-list").slick('slickPrev');
});

$('.cc-next').click(function(){
    $(this).closest('.slider').find(".slider_collection-list").slick('slickNext');
});


});

</script>

2. Carrusel dinámico

Para transformar tu contenido dinámico en un Carrusel en Webflow, copia este código en before </body> .


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<script>

// Carousel dinámico

$( document ).ready(function() {


$('.carousel_collection-list').slick({
  dots: true,
  speed: 1000,
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: false,
  autoplay: true,
  autoplaySpeed: 1500,
  responsive: [
    {
      // tablet
      breakpoint: 991,
      settings: {
        slidesToShow: 2
      }
    },
    {
      // mobile portrait
      breakpoint: 479,
      settings: {
        slidesToShow: 1
      }
    }
  ]
});

$('.cc-prev').click(function(){
    $(this).closest('.carousel').find(".carousel_collection-list").slick('slickPrev');
});

$('.cc-next').click(function(){
    $(this).closest('.carousel').find(".carousel_collection-list").slick('slickNext');
});


});


</script>

3. Carrusel dinámico personalizado

Este carrusel dinámico se diferencia del otro porque vamos a dar estilos diferentes al elemento que se encuentra en el centro. Copia este código en before </body> .


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<script>

// Carousel dinámico personalizado

$( document ).ready(function() {


$('.carousel-2_collection-list').slick({
  dots: true,
  speed: 1000,
  infinite: true,
  slidesToShow: 3,
  arrows: false,
  centerMode: true,
  centerPadding: '40px',
  responsive: [
    {
      // tablet
      breakpoint: 991,
      settings: {
        slidesToShow: 2
      }
    },
    {
      // mobile portrait
      breakpoint: 479,
      settings: {
        slidesToShow: 1
      }
    }
  ]
});

$('.cc-prev').click(function(){
    $(this).closest('.carousel').find(".carousel-2_collection-list").slick('slickPrev');
});

$('.cc-next').click(function(){
    $(this).closest('.carousel').find(".carousel-2_collection-list").slick('slickNext');
});


});


</script>

Otros tutoriales de Webflow:

11 Pasos para mejorar la velocidad de tu Web hecha en Webflow

18:37 min

Convertir web de Webflow a Wordpress

21:52 min

Cómo crear un Efecto Parallax en Webflow

15:19 min

Hosting Webflow 100% Gratis

9:05 min

Diseñar un Carousel Infinito en Webflow

8:47 min

Crear web multilenguaje en Webflow sin uso de herramientas externas

14 min

Añadir botones dinámicos para compartir en Redes Sociales en tu Web

9:05 min

¿Alguna duda? Comenta:

¡Hola! ¿Quieres que te comparta algo que te puede interesar?
¡Si claro!
Nah, otro día
¿Eres Freelance?
Esto te va a interesar...
Acabamos de lanzar la Herramienta Freelance.

Ahorra ciento de horas en la gestión de tu negocio como Freelance.

En ella podrás encontrar la Estrategia paso a paso y plantillas para ser un freelance de éxito.