Cómo crear un increíble carrusel de testimonios en divi con flickity.js sin plugins
HTML-код
- Опубликовано: 8 сен 2024
- En este tutorial aprenderás a diseñar un increíble carrusel slider de testimonios en divi con flickity.js y sin plugins...
➡️ Enlace al post del blog: ovdivi.com/com...
💥 Suscribete a los tutoriales exclusivos: academia.ovdiv...
🚨 Curso premium de divi: academia.ovdiv...
✅ Academia OV Divi: academia.ovdiv...
🔥 Suscripción a Divi de Elegant Themes con 20% de descuento: bit.ly/2HlLVeI
💎 Comunidad de Facebook: / ovdivi
#Divi #carrusel #ovdivi
--------
S Í G U E M E
--------
Web: ovdivi.com/
Facebook: / ovdivi
---------
P E R S O N A L
---------
Twitter: / oscarviedmaweb
Web: oscarviedma.com/
Excelente videazo bro (Y) este video vale oro bro!
Qué genial que te ha servido Javier. Seguiré creando más contenido. Un abrazo.
Excelente tutorial, funciona a la perfección si se deshabilita la opción de "Defer jQuery And jQuery Migrate" como bien mencionas más a detalle en los comentarios.
Saludos!
Así es Charly, en todos los proyectos de divi siempre es importante deshabilitar la opción "Defer jQuery And jQuery" para que el código personalizado funcione correctamente :)
Oooh si, menos mal que leí esto, ya me estaba volviendo loco.
@ jaja suele pasar :) por eso siempre es buena idea darle un vistazo a los comentarios.
Saludos Ramiro.
Excelente aporte!!!
Gracias Rodolfo, un abrazo
Hola muchas gracias, se podria utilizar para hacer un post slider? osea poner 3 post, y asi sucesivamente
Hola Deshire para realizar un carrusel para los post del blog tengo este otro tutorial premium: ovdivi.com/como-crear-un-slider-para-los-post-entradas-del-modulo-blog-de-divi-sin-plugins/
Hola Oscar, gracias por el tutorial y por todo el material que compartes. Con respecto a este slider, me surgió un pequeño inconveniente, resulta que algunos testimonios tienen un poco más de texto y hace que en la versión móvil no se visualicen correctamente, se cortan un poco y al ratito se ve bien. Esto sucede solo en los testimonios que tienen mas texto. Gracias!
Hola qué tal 😀 no sabía de ese detalle, tengo que revisarlo para saber que solución darle. ¿Tienes tu web en línea para poder darle un vistazo?
Una consulta por cierto esta genial tu video super bien el tutoría no se ve en celular no se ve lo de los testimonio sale en blanco a que se debe o que debo hacer
Hola, debe funcionar tanto en móvil como en escritorio. ¿Cuál es la url de tu ejercicio?
Buenisimo, te felicito Oscar. Gracias por compartir este video. ¿Si quisiera poder guardar esta seccion y guardarlo en ordenador para implementarlo en cualquier pagina? ¿se podria? dime como podria hacerlo porfa. mil gracias por este video nuevamente
Muchas gracias Lucero, por supuesto que se puede exportar la página para posteriormente utilizarla en otra página. Solo haces clic en el icono inferior morado de los 3 puntitos, buscas la opción de portabilidad y exportas el archivo. Para cargarlo en otra página es el mismo proceso pero en lugar de exportar es importar.
Ten en cuenta que debes volver a introducir el código CSS en tu página porque al exportarlo no se exporta ese código al menos que lo introduzcas en un módulo código dentro de las etiquetas AQUÍ CÓDIGO CSS
Hola Oscar, gracias por compartir este tutorial. Tengo un problema con la flechas porque no estan alineadas verticalmente pero estan un poco mas abajo del medio. Hizé el ejercicio 2 veces y intenté abrir la pagina en diferentes navegadores pero todavia tengo este problema. Tienes una idea ? Gracias!
Hola qué tal, ¿Cual es la url de tu ejercicio? Puedo inspeccionar tu ejercicio para ver que sucede. Si no te deja pegarla aquí en el comentario puedes comentarla así: tupagina web punto com
Gracias por el video, es excelente. Una pregunta distinta a este tema por favor. Si yo tengo un sitio back-end por ejemplo de alquiler de autos, y quiero mostrar algunos campos de tablas en un post de mi sitio front-end hecho con wordpress, eso seria posible? tengo que usar e incrustar codigo php en mi post? o para eso sirven los campos personalizados? Gracias.
Hola puedes hacerlo con divi machine y acf. Tengo un tutorial que te puede ser de ayuda: ruclips.net/video/v5f2msCdoWE/видео.html
@@OVDIVI gracias voy a revisarlo
lo realice al pie de la letra pero no me funciono siguen uno debajo del otro.
Asegurate que tengas esta configuración en divi performace: academia.ovdivi.com/wp-content/uploads/2021/09/configuracion-divi-performance.png
@@OVDIVI Venía con ese problema pero esto me lo solucionó, muchas gracias!
¿Qué se debe hacer para que se haga más ancho en teléfono?. Se ve muy angosto en celulares. Gracias por su ayuda
Cual es la url de tu ejercicio? Quiero ver como se ve para poder ayudarte.
Saludos
Oscar, crees que estos pasos y código funcionen para Elementor?
Podría ser, solamente debes saber en dónde colocar las clases y código para que te funcione correctamente. Hace tiempo no uso elementor así que no sabría decirte exactamente. Pero estoy seguro que se puede.
Hola, lamentablemente solo me funciona en celular, en portátil me aparecen todos juntos uno encima del otro, me podrías ayudar
Hola Emily, apenas te ando leyendo. ¿Cómo vas con este tutorial? Si aún tienes problemas comparteme la url para inspeccionarlo
¿A alguien más le pasa que se corta la imagen? En el portátil no se nota tanto porque se corta muy al borde, pero en el teléfono se corta la imagen por la mitad al hacer el scroll hacia abajo, una vez vuelvo arriba la imagen aparece completa, aún así queda poco profesional para nuevos usuarios que visitan el website. ¿Alguna solución?
Hola qué tal amigo, me puedes compartir la url de tu ejercicio para ver ese detalle que comentas por fa. No me he percatado de ese detalle y me gustaría revisarlo
Hola, hice todos los pasos, hasta desactive el "Defer jQuery And jQuery" y aún me sigue sin aparecer.. hasta borre cache pero aún así sigue sin servir :(
Hola Sergio, es probable que tengas un paso mal, yo lo he realizado y me funciona correctamente. ¿Cual es el link de tu web?
Genial!!
Un abrazo Natalia 🔥
Para hacer un segundo carrusel en la misma página, como tenemos que hacer. Por que lo intente pero las fotos siempre se van al primero 😬🙏
Hola Mauricio, intenta volviendo a copiar el código jQuery para integrar Flickity.js con divi, pero reemplazar ov-carousel por ov-carousel-2 o algún otro nombre
@@OVDIVI Hola, he hecho esto, pero no me funcionó... Debo cambiar todos los ov-carosel con un guión y número? O debo hacer como una copia de la sección donde tengo el código y desde ahí modificar el ov-carousel? Gracias!
@@nadiagarcia8826 Hola Nadia, envíame tu ejercicio a hola@ovdivi.com y con gusto lo reviso. Si puedes me compartes el acceso para darle un vistazo por dentro.
No entiendo que sucede, segui todos los pasos y mis testimonios quedan seguidos uno de otros, no se aplica el carrusel
Hola Bryan, puede ser por Divi Performance.
Dirígete a Divi > Opciones del tema > General > Performance y deshabilita la opción: Defer jQuery And jQuery Migrate
@@OVDIVI Confirmo, esa es la solución.
¡Gracias!
tenia el mismo problema, pero solo era la configuración. deshabilitar en opciones de tema.. Gracias,,,
@@OVDIVI genio, gracias!
No funcionó :(
Debes configurar correctamente divi performance: academia.ovdivi.com/wp-content/uploads/2021/09/configuracion-divi-performance.png
QUIEN MIRA ESTO ?¡
Yo
Yo
yo
Yo