Hola qué tal chicos y chicas este video tutorial forma parte del curso premium: Crea un sitio web de reservas, tours, viajes con wordpress, divi y woocommerce.
He decido liberar esta lección gratis para ti porque te lo mereces por siempre apoyarme.
En esta lección aprenderás a crear un carrusel o slider de testimonios en divi con una librería llamada slick.js, aunque en realidad esta funcionalidad la puedes integrar con cualquier módulo de divi.
Genial, pues te dejo con esta lección del curso, espero la disfrutes…
Materiales:
Integrar slick.js con divi mediante CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
Inicializar slick.js:
<script>
jQuery(function($){
$('.testimonios').slick({
infinite: true,
arrows: false,
dots: true,
slidesToShow: 3,
slidesToScroll: 1,
pauseOnHover: true,
responsive: [
{
breakpoint: 980,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
</script>
Estilos CSS slick.js:
/* Estilos slick.js testimonios */
.slick-slide
{
float: left;
}
/* Dots */
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
bottom: -80px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 28px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}
@media only screen and (max-width: 768px) {
.slick-dots
{
bottom: -60px;
}
}
/* Arrows */
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 30px;
height: 30px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: #14b9d5;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
outline: none;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
font-family: 'etmodules';
font-size: 25px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left: 16px;
z-index: 99;
}
[dir='rtl'] .slick-prev
{
right: 16px;
left: auto;
}
.slick-prev:before
{
content: '\34';
}
[dir='rtl'] .slick-prev:before
{
content: '\35';
}
.slick-next
{
right: 16px;
z-index: 99;
}
[dir='rtl'] .slick-next
{
right: auto;
left: 16px;
}
.slick-next:before
{
content: '\35';
}
[dir='rtl'] .slick-next:before
{
content: '\34';
}
IMPORTANTE: Si estás usando las versiones recientes de divi (4.X.X) para que el ejercicio funcione debes dirigirte a Divi > Opciones del tema > General > Performance > Y deshabilitar la opción: Defer jQuery And jQuery Migrate. 🙂
Hola veo que si quiero hacer de 1 solo slider debo utilizar este codigo
$(‘.single-item’).slick();
pero como va en la parte de CSS como se deberia poner?
Porque el cdigo que dejas aqui en la parte de materiales no es el mismo que se encuentra en la libreria, esa parte no comprendí como lo modificaste.
Gracias
Hola Paula, el código varia un poco porque yo lo he adaptado a divi. Para el CSS puedes usar el fragmento CSS que usamos aquí ya que solamente es para darle estilos a los dots o puntitos del carrusel.
Hola, intento hacer lo que dices, con el mismo código que menciona Paula, pero no tengo ningún resultado.. Coloco el código $(‘.single-item’).slick();, en la integración debo poner el mismo script que colocas tú? El css tampoco surge efecto.. Por favor, podrías ayudarme?
Debes usar el código que yo comparto porque si estás queriendolo copiar de slick.js este varía un poco. Lo debes a adaptar a WP. Mejor usa el que comparto y tienes que reemplazar parámetros solamente para adaptarlo a cualquier slider.
Buenas tardes, queria que en movil se vieran 3 columnas en vez de 1.
Como puedo hacerlo?
Hola Yeray puedes jugar con estas opciones del código Inicializar slick.js:
breakpoint: 767,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
Me sigue sin funcionar…
Quería algo del estilo de https://www.aloyoga.com/?gclid=Cj0KCQjw28T8BRDbARIsAEOMBczPytdhhvMHItQYIwLiSUQjRktjJfGNvYvb9zzpkism89hMitxzhM4aAjHqEALw_wcB en versión móvil.
Te agradecería que pudieras ayudarme.
Saludos.
También funciona para hacer un carrusel de productos destacados o para ofertas?
Hola Marcelo, sí podría funcionar aunque la integración sería un poco diferente. Yo he integrado un carrusel de productos de woocommerce pero hemos usado otra librería en este tutorial premium, quizá te interese.
Excelente tutorial. Lo he seguido y ha sido sencillo implementarlo porque lo has explicado muy bien. Es algo que deberia venir por defecto en Divi pero esta solucion me gusta más que buscar e instalar plugings de los que no voy a usar mas que la decima parte.
Gracias y un saludo.
Así es Roger, esperemos que pronto incluyan un módulo para crear carruseles con divi. En lo personal también prefiero hacerlo de esta manera ya que así me evito de un plugin y no agrega funcionalidad o código demás en mi sitio web. Un abrazo y excelente año Roger 🙂
Buenas Oscar:
Me he dado cuenta que el código solo funciona en mi web cuando estoy logado en wordpress. Si lo miro desde una pagina de incognito y otro navegador no se activa el javascript y solo veo los módulos de Divi (Los divs del carousel) uno encima del otro.
¿Tienes idea de que podría estar pasando?
Hola Roger, podría ser por la cache de divi. Intenta desactivar la generación de CSS Estático desde Divi > Opciones del tema > Constructor > Avanzado… A ver si esto ayuda.
Saludos.
Ya probé eso pero no se solucionó
Hola Oscar, excelente tutorial y recurso, como siempre! Gracias! Sólo quiero saber si hay un máximo de elementos a mostrar? En mi caso son imágenes, no testimonios y por más que le agrego, solo me muestra las primeras 4. Es porque ese tipo de slick slider sólo acepta un máx de 4? Hay alguna forma de hacer que acepte más o tendría que elegir otro carrusel?
Lo otro es que si le pongo que me muestre 2 en lugar de 3 ya se descuadran todos los márgenes, pero bueno eso lo puedo solucionar, hay que arreglar los paddings por cada módulo de imagen independientemente, que ya la de la izq tiene que tener márgenes diferentes a la de la derecha. Pero me pregunto por qué pasa eso?
Hola Carlos, no tiene un límite de elementos a mostrar, puedes mostrar los que desees pero esto puede afectar los tiempos de carga de tu sitio web, así que se moderado con el número a mostrar. Recuerda que debes duplicar el módulo, en tu caso imagen y deben llevar el nombre de clase slick-slide.
Hola Oscar! Tengo un problema, hice todo lo que pediste y cuando instalo el CSS y actualizo, me aparece todo en una columna en el lado izquierdo, en vez de carrusel. ¿Sabes qué puede ser?
Gracias!
Hola Oriol, seguramente un paso se te ha ido, o también quizá estés colocando el código incorrectamente, muchas veces con un signo que tengas de más se rompe todo. ¿Cuál es la url de tu sitio?
Hola, Me pasa lo mismo, como lograste solucionarlo?
Hola Carlos, compárteme la url de tu web para inspeccionar que puede estar sucediendo
Buen día Oscar, estoy integrando el código y me sale exatamente igual como a Carlos, como puedo solucionar esa parte?
Hola Jesus, como le comenté a Carlos necesito la url de tu ejercicio para darle un vistazo y saber que está sucediendo…
Hola Oscar, estoy sorprendido por tan buen contenido y la manera en la que das a conocer en tus videos, una consulta, como hago para que el carrusel sea automático?
Hola Aldair muchas gracias, me alegra saber que existen personas que valoran mi trabajo 🙂
Para que el carrusel se reproduzca de manera automática, en las opciones de inicialización debes agregar estas propiedades:
autoplay: true,
autoplaySpeed: 2000,
Me pasa igual, no funciona
Hola Excelente explicación, Se puede dejar el slide que avance automático, ? Gracias buen trabajo
Hola Carlos, gracias. Sí se puede, solo tienes que agregarle al código inicializador las siguientes propiedades:
autoplay: true,
autoplaySpeed: 2000,
Muy buenas Óscar, ¡gracias por el tutorial y el soporte!.
¿Cómo podría hacer que la animación fuera infinita?.
Gracias de antemano
Hola Tamara, te refieres a que tenga un autoplay? Lo logras agregando estos parámetros en el código:
si te refieres que al llegar al final vuelva al primero, eso ya lo tenemos configurado en el código con:
Gracias Óscar. No me había dado cuenta de que ya estaba en el código y además lo tenía en «false» 🤦♀️
Que tal Oscar, mira eh tomado tu ejemplo, sin embargo estoy escogiendo el carusel del slick que dice «Center Mode» , pero aqui tengo un problema con el css, supuestamente es
float:left;
Pero pierde el estilo de centrado que estoy escogiendo del slick, y estoy que busco con display, y entre otros codigos css, nose si me podrias ayudar al respecto muchas gracias
Hola Cristian qué tal, déjame tu sitio por aquí y le doy un vistazo para saber que sucede.
¡Saludos!
Hola Oscar, gracias por tan buena explicación!!
Lo que estoy teniendo un poco de problemas es en poner las flechas.
Le quité el «false» del codigo del slick js, y acomode un poco los colores y demás en tu codigo, pero me sigue apareciendo la palabra «previus» y «next» debajo de la flecha y se encuentran muy encimadas a las columnas también….
Además me pasa que mis slides tienen todas medidas diferentes y veo que los tuyos son todos de la misma altura porque tienen la misma cantidad de texto, hay algun codigo para que las columnas se igualen en altura? Ya que la opcion de divi de igualar alturas no me está funcionando…
Sos un genio gracias por tus tutoriales y tu curso de divi!! =)
Hola Nadia qué tal, me puedes compartir la url de tu sitio y te ayudo con lo la palabra que mencionas.
Sobre la altura quizá necesites definir una altura minima de cada testimonio desde sus Ajustes > Diseño > Tamaño. La altura mínima debe basarse en el tamaño de altura del testimonio más alto. Y esa altura mínima se la debes definir a los demás testimonios.
Si el sitio es preucr.com pero bueno ya pude quitarle la palabra. Era porque tenía que dejar en cero la altura de línea de las flechas. Lo que no logro es correrlas más hacia el centro.
Y lo de la altura de los testimonios ahora voy a probar con esto que me decís.
De nuevo gracias!!!!
Nadia, para centrar las flechas debes cambiar la posición bottom de estas clases CSS: .slick-prev, .slick-next
En el CSS busca esas clases y juega con la posición bottom, incluso right y left.
Hola, la verdad que genial, empecé a seguirte para descubrir el mundo divi, ya que es fascinante pero complejo de entender rápidamente. Me resolviste muchas horas de putear. Lo único que no estoy consiguiendo es que aparezcan las flechas al costado.
Gracias de verdad muy útil todo.
Sobre las flechas, he mirado el slick y no encuentro lo que está faltando en el ejemplo que diste
Hola Carmen, muchas gracias por seguirme 🙂
¿Pero si te están apareciendo las flechas o no? Para activarlas en el código inicializador en la parte que dice «arrows: false,» ponle arrows: true,
Tengo 10 slide y quiero que se muestre solo los 6 primeros los 4 restantes que se mantenga ocultos, se puede?
Hola Alejandro puedes cambiar el valor: slidesToShow: 3, del código inicializador. Desde ese parámetro defines cuántos slides quieres mostrar.
Hola Alejandro, he realizado un carrusel con el módulo portfolio de DIVI y Slick.js siguiendo el tutorial y funciona correctamente. Pero en Firefox aparece un espacio enorme debajo del carrusel y no logro identificar cual puede ser el problema.
Algunas de las imágenes que crea Slick.js en los DIVs class=»slick-slide slick-cloned» tienen una altura de mas de 4000px. Igualmente la imagen se ve correctamente y el slider funciona.
A ver si a alguien mas le ha ocurrido algo similar y me orienta como solucionarlo.
Hola Max, le hablas a Alejandro o a mi? 😁 Compárteme la url de tu web y reviso que sucede.
Saludos.
Perdón Oscar, me he liado leyendo los comentarios pero el mensaje es para ti.
Puedes ver la web en:
http://mgbingnew.com.mialias.net/
A ver si se te ocurre como solucionarlo?
Gracias.
Hola Oscar, pudiste echar un ojo al fallo? Se te ocurre alguna solución?
Muchas gracias.
Hola Max, en qué sección tienes el slider?
Hola Oscar, es el slider que esta en la página principal en la sección «ÚLTIMOS PROYECTOS».
El fallo ocurre solo en Firefox y hace que la sección siguiente se desplace hacia abajo dejando un espacio en blanco.
A ver si se te ocurre alguna solución, que soy incapaz de encontrar el fallo.
Muchas gracias.
Hola Oscar como estas? saludos
Podrías ayudarme, realice todos los pasos de video, me ocurrió que en los ajustes de cada columna no me toaba los códigos en las descripciones d retrato de opinión, y en la descripción. Luego de solventado ese punto que llegue igual a como tu lo tienes en el video. coloco el código de inicialización. todo según como lo dices y tome los códigos de tu pagina pero no e sale el Slider. Podríamos chequear donde podría tener el error.
Mi sitio web lo estoy cambiando usando Divi y quiero incorporar esa funcionalidad que tenia en elementor
Gracias porque es un excelente tutorial y muchas dudas las fui aclarando leyendo los comentarios.. pero me toca consultarte.
Hola Ruth disculpa por responder hasta ahora. Estaba saturado de trabajo y recién puedo responder los comentarios del blog.
Si continúas con el problema sería mejor me compartieras la url de tu sitio para darle un vistazo.
Hola Oscar, ha funcionado genial, gracias por tu tiempo y compartir tu conocimiento. ¿Es posible igualar las alturas?
Hola Diego, para igualar las columnas deberías definir una altura en cada testimonio. Obviamente también dependerá de la cantidad de palabras con testimonio.
No funciona, y si metí todo tal cual jaja mi web la tengo en local.
Hola Ale, no te funciona el carrusel o no te funciona el autoplay?
hola, necesito que me ayudes con un problema que me tiene todo loco, realice el slider un poco mas personalizado a mi manera usando tu tutorial (por cierto excelente video) y todo salió bien cargaba bien y hacia la función de slider, pero un dia empezo simplemente a no cargar y eh revisado exhaustivamente el código css y js y no me aparece nada malo entonces nose que hacer para solucionarlo. revise el inspector y en la consola me sale un error dice;
( Uncaught TypeError: $(…).slick is not a function )
(Uncaught TypeError: $.each is not a function )
por cierto eso la pagina la estoy haciendo con divi . porfa ayudame
Si estás usando divi en la versión 4.10.X prueba deshabilitando las opciones de Divi > Performance… Quizá allí esté el conflicto.
Hola! Es cierto, hace un tiempo lo implementé y funcionaba perfectamente, con la última actualización de DIVI ahora no me funciona. He revisado el código y la realidad es que es lo mismo que pones en el tutorial y que antes funcionaba.
El error es el siguiente: jQuery.Deferred exception: $(…).slick is not a function TypeError: $(…).slick is not a function.
Por cierto, el tutorial excelente!
Hola José Fernandez, si estás usando las versiones recientes de divi (4.10.X) dirígete a Divi > Opciones del tema > General > Performance > Y deshabilita la opción: Defer jQuery And jQuery Migrate. Si el problema persiste desactiva todas hasta descubrir cual es la que te da el problema 🙂
Gracias Oscar!! en efecto con esto se ha solucionado!! como te dije antes, excelente post y tu respuesta perfecta! Gracias!
Excelente curso, voy a empezar a seguirte! tampoco me funcionaba pero con esta solución que le das a Jose funciona perfectamente, deberías añadir una nota arriba para los nuevos (así no te darán la tabarra a ti) jajaja gracias crack!
Hola Javier, excelente idea jaja, en este momento la agrego 🙂
¡Saludos!
Hola Oscar.
Muchas gracias por tu tutorial.
Con las últimas actualizaciones se me he desactivado el carrusel. ¿Sabes que puedo hacer para que me siga funcionando? probé a deshabilitar la opción: Defer jQuery And jQuery Migrate pero no funciona.
Gracias
Hola María, deshabilitando esa opción de Defer jQuery And jQuery Migrate debe corregirse el problema. ¿Si la deshabilitaste correctamente? También si estás usando un plugin cache prueba deshabilitando la optimización JavaScript, esto sucede más que nada con siteground.
Buen día Oscar, tengo el mismo problema que arriba con carlos, que puedo hacer? se va todo a la izquierda y no me muestra el carrusel
¿Cuál es tu url?
Que tal Oscar, mira tome tu ejemplo hace mucho tiempo funcionó perfectamente pero ahora con la nueva actualización la sección se visualiza de manera diferente en lugar de que se vea como carrusel se ve un comentario arriba del otro
Hola Christian no sé si leíste la NOTA IMPORTANTE que dejé al final del post. Ahí menciono que es lo que tienes que realizar 🙂
si lo realice pero sigue igual
Si tienes exactamente la misma configuración? Porque muchas veces me dicen que tienen esa configuración y no es así jeje
Hola, me gusto mucho este tutorial. 😀 Tengo un problema al momento de visualizarlo en celular se hace un espacio a la derecha y se visualizan las imágenes del carrusel. ¿Me podrías ayudar a resolver este problema?
Hola Elizabeth, muchas gracias.
Sobre el desplazamiento que comentas, entra a los ajustes de la sección > Avanzado > Visibilidad y en desplazamiento horizontal colocas «oculto». Con esto debe quedar resuelto, si no queda, me avisas por fa.
Saludos
En primer lugar enhorabuena y muchas gracias por este magnífico tutorial.
He utilizado tu diseño en varios sitios web sin ningún problema pero en un sitio concreto no funciona y no comprendo el motivo. Estoy utilizando el mismo código que en los otros sitios que sí funciona. ¿Podrías ayudarme?
Gracias de antemano.
Hola!
Escribí un comentario hace unos días y no lo veo publicado. Vuelvo a preguntar lo mismo por si hubo algún error;
He insertado este magnífico tutorial en varios sitios y funciona perfectamente pero en un sitio concreto no funciona y no entiendo el motivo, me tiene desconcertado. Espero puedan ayudarme a resolver el problema.
https://marinaflamenca.com/test/
Hola David, no habido ningún error, es solamente que no había tenido la oportunidad de revisar los comentarios en el blog, pero aquí estoy, estamos de vuelta.
Tu problema puede estar relacionado con divi performance. Utiliza esta configuración para que la librería funcione.
Hola Oscar!
Muchas gracias por tu vídeo ha sido de gran ayuda. Sin embargo, no me quedó muy bien los comentarios en la web se ven alargados y en el móvil se ve mejor pero no debería ser el resultado final,
Mi web es https://www.espanea.com/
Muchas gracias por tu ayuda
Hola Oscar,
Te escribo, ya que intenté hacer el carrusel pero me sale en la web los cuadros alargados y en el móvil es mejor pero aún así no están bien.
Muchas gracias por tu ayuda mi web es espanea.com
Hola Diana, si estás utilizando esta configuración en divi performance?
Hola Oscar,
La configuración está igual al pantallazo que me has enviado.
¿Estás suscrita en los tutoriales exclusivos? Si es así puedes escribirme por el chat de soporte premium, me compartes los datos de acceso de tu web y entro a revisar que está sucediendo por fa.
Holaaa se tarda algo en cargar el carrusel, como si tuviera un delay, estuve investigando porque pensé que quizás poniendo en el header se solucionaría, pero nop, ¿hay manera de solucionarlo? 😀
Hola Ale, que raro, en mi demo carga bien.
¿Tienes un plugin cache? ¿Cual es tu web?
Hola Óscar, extraordinario tutorial y excelente la forma de explicarlo. Una pregunta, ¿se puede hacer de dos filas? es decir que pasen seis de golpe ¿tres arriba y tres abajo?
Mil gracias
Hola Vicente, muchas gracias. Sobre tu consulta, para este ejercicio solamente podemos hacerlo con una línea, a ver si más adelante hago una alternativa para mostrar dos filas en el carrusel 😉
¡Gracias por la recomendación!
Un abrazo Vicente.