Cerrar video

Cómo crear un increíble carrusel de testimonios en divi con flickity.js sin plugins

por | Feb 9, 2022 | Tutorial gratuito | 12 Comentarios

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.

Cómo crear un increíble carrusel de testimonios en divi con flickity.js sin plugins

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…

1. Descarga los assets

2. Código jQuery para integrar Flickity.js con divi:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/flickity.min.css">
<script src="https://unpkg.com/[email protected]/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;
}

Tutoriales Relacionados

12 Comentarios

  1. Javier Acevedo

    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 😊👍

    Responder
    • Oscar Viedma

      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 💪

      Responder
  2. Julian Diaz

    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

    Responder
    • Oscar Viedma

      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.

      Responder
  3. kevin

    Hola una pregunta como hago para hacerlo groupcells, me gustaria que fueran de 3 en 3, excelente video por cierto 🙂

    Responder
    • Oscar Viedma

      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.

      Responder
  4. kevin urrea

    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

    Responder
    • Oscar Viedma

      Te respondí en el comentario anterior Kevin 🙂

      Responder
  5. fernando

    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?

    Responder
    • Oscar Viedma

      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.

      Responder
  6. Rick

    Hola Oscar gran tutorial quisiera saber si es que es posible cambiar el icono del botón

    Responder
    • Oscar Viedma

      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…

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada.

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$6 USD / mes

Pin It on Pinterest