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>
¿Alguna duda? Comenta: