Anteriormente ya te he mostrado como integrar un carrusel con slick.js y divi, ese tutorial ha sido muy bien recibido por la comunidad de divi y eso me alegra mucho.
En esta ocasión te voy a enseñar otra alternativa de carrusel, en este tutorial vamos a integrar otra librería llamada Flickity.js, esta librería es muy liviana y es muy fácil de integrar con divi, así que no te preocupes.
La idea de este ejercicio nace porque un suscriptor premium de los tutoriales exclusivos de la Academia OV DIVI, me ha preguntado como lograr el carrusel de testimonios que tienen en esta página, me ha parecido un muy buen diseño que decidí replicarlo con divi y obviamente grabar el tutorial 😍
Para lograr este ejercicio vamos a necesitar de algunos recursos que te dejo a continuación…
2. Código jQuery para integrar Flickity.js con divi:
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
jQuery(function($){
// Envolver las filas en un div
$( ".ov-flickity .carousel-cell" ).wrapAll( "<div class='ov-carousel'></div>" );
});
</script>
<script>
jQuery(function($){
$('.ov-carousel').flickity({
cellAlign: 'center',
contain: true,
wrapAround: true,
pageDots: false,
});
});
</script>
3. Código CSS para adaptar correctamente el carrusel:
.ov-carousel {
padding-right: 30px;
padding-left: 30px;
}
@media only screen and (min-width: 981px) {
.ov-carousel {
max-width: 1290px;
margin: 0 auto;
padding-right: 150px;
padding-left: 150px;
}
}
.flickity-button {
background: hsl(0deg 0% 100%);
color: #111;
width: 50px !important;
height: 50px !important;
}
.flickity-button:hover {
background: #FF3951!important;
color: #fff !important;
transition: transform 350ms ease, box-shadow 350ms ease, background-color 350ms ease, color 350ms ease, -webkit-transform 350ms ease;
}
body #main-content .carousel-cell {
margin-right: 20px !important;
margin-left: 20px !important;
}
Me encantó el diseño responsive de este slider, un excelente tutorial digno de los tutoriales exclusivos. Si está calidad tienen los tutoriales gratuitos, imaginen lo que encontrarán si se suscriben. Muchas gracias Óscar 😊👍
Hola Javier, muchas gracias por tu comentario 😍
Siempre trato de dar lo mejor en cada uno de los tutoriales, sea gratuito o premium, pero obviamente los premium tienen siempre un plus.
Un abrazo y seguimos adelante 💪
Hice todo tal cual como aparece en el video pero no me aplica el carousel a las filas creo que hay algun problema con el codigo
Hola Julian, seguro es por Divi Performance… Dirígete a Divi > Opciones del tema > General > Performance y deshabilita: Defer jQuery And jQuery Migrate.
Espero esto ayude. Saludos.
Estaba teniendo el problema `$(…).flickity() is not a function` y este comentario me ayudó para solucionarlo! Sé que es un post antiguo, pero seguramente si a mí me pasó, a alguien más le puede ayudar esta solución.
Por cierto, si Divi está en español, la opción para desactivarlo se encuentra en Opciones del tema > General > Actuación > Aplazar jQuery y jQuery Migrate
Excelente aporte Javo, gracias por tomarte el tiempo de comentar 🙂
Hola una pregunta como hago para hacerlo groupcells, me gustaria que fueran de 3 en 3, excelente video por cierto 🙂
Hola Kevin para hacerlo de 3 en tres debe ser un poco diferente el código. Más o menos tienes qué hacer la composición como la hacemos en este otro tutorial pero ahora aplicando la librería de este tutorial.
Hola me gusta mucho este tutorial es increíble las diferentes cosas que nos enseñas a hacer con tus tutoriales. tengo una duda si yo quiere hacerlo de 3 como lo haría ósea en groupcells
Te respondí en el comentario anterior Kevin 🙂
hola estoy intentando agregar la función groupCells para que se muestren de 2 en 2. Menciona que se debe agregar la clase is-selected a las celdas, pero no logro conseguir que funcione, ¿alguien que le halla salido?
Hola Fernando. La composición hazla cómo este tutorial, pero en lugar de integrar slick integra flickity.js.
Aunque también puede servirte slick.js sin problema.
Hola Oscar gran tutorial quisiera saber si es que es posible cambiar el icono del botón
Hola Rick, ¿Del botón inferior? Ese botón se construyo con el propio módulo de divi, así que si es posible desde los ajustes del módulo / diseño / botón…
Me funcionó a la perfección el tutoríal. Quiero saber si es posible eliminar las flechas izq y der o por lo menos quitar el círculo.
Gracias.
Excelente Sergio 🙂
Para ocultar las flechas, en el código jQuery para integrar Flickity.js, arriba de pageDots: false,
Agrega:
prevNextButtons: false,
Hola, el tuto no funciona, la web de unpkg.com está caída 🙁
Hola Carlos, el tutorial sigue funcionando correctamente.
Hola Óscar. El tutorial es magnífico y funciona perfectamente.
Lo que me gustaría saber es cómo habéis hecho la composición de las imágenes.
Gracias y un saludo
Hola Roberto, la edición de las imágenes la puedes hacer con Photoshop, Affinity Photo e incluso con Canva 🙂
Hola Oscar, muchas gracias por ese tutorial, lo he realizado y me funciona muy bien en el entorno DIVI, he realizado una prueba para ver como se ve al lanzar la pagina , y pare que no hace lo del función wrap. te dejo abajo el enlace donde intente aplicarlo a ver que piensas que puede ser. gracias !
Hola Leoni. Perdona, ¿sigues con el problema que comentas? No pude ver tu enlace 🤔