Como Agregar un Carrusel de Imágenes a tu Página Fácilmente | Materialize

Подписаться 511 тыс.

Просмотров 177 тыс.

50% 1

En este video aprenderas a usar Materialize.css para crear un carruusel del imágenes en tu página web fácilmente.
🚀 Blog de Diseño Web:
www.falconmasters.com
⭐ Curso de Diseño Web desde Cero:
www.desarrolloweb.io/cursos/d...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrolloweb.io/cursos/p...
⭐ Curso de React y Firebase desde Cero:
www.desarrolloweb.io/cursos/r...
⭐ Curso de Bootstrap:
www.desarrolloweb.io/cursos/b...
⭐ Curso de Woocommerce:
www.desarrolloweb.io/cursos/t...
---
📄 Código Base del Proyecto:
github.com/falconmasters/caro...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
/ falconmasters

Наука

Опубликовано:

17 окт 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 256

@oeneikaphotos3826 4 года назад

Empecé en el desarrollo web hace 3 años y empecé viendo tus vídeos y aprendiendo todo lo que hoy en día sé, muchísimas gracias

@leonardo6974 3 года назад

y como te va ?

@quetzalgamers 4 года назад

Hola Arturo muchas gracias por todos los tutoriales hasta ahorita no eh visto ningún otro tutorial como los tuyos, explicas muy bien y das a conocer para que sirve cada etiqueta o estilo. 👍🏼👍🏼👍🏼

@pabloagustinvera9889 4 года назад

Gracias Arturo por tus conocimientos, sigue así. Saludos desde Argentina.

@FalconMasters 4 года назад

Gracias a ti por ver mis videos.

@zaidjaxton125 2 года назад

I know im asking randomly but does anybody know a way to log back into an Instagram account? I stupidly lost the login password. I appreciate any assistance you can give me

@crosbycesar6035 2 года назад

@Zaid Jaxton instablaster =)

@cristianovelazquez2048 4 года назад

Genial!! Ayudas a muchas personas con estos videos.

@johanalexanderrojassuarez1407 3 года назад

Aplicado y funcionando perfectamente! Gracias por tan clara explicación

@danitenconi 3 года назад

Groso 🙌 Idolo 🙌 Crack 🙌 Funciona de diez!!! ¡¡Muchísimas gracias!!!, hace varios días estoy buscando algo asi

@nardosys 2 года назад

gracias a vos cada dia me gusta mas el desarrollo web. gracias por tanto

@adrian69crespo 3 года назад

¡Muchas gracias! esta chingon tu video, saludos desde Ciudad Victoria, Tamaulipas, México

@LauraStm 3 года назад

Muchas gracias... Padrisimo proyecto. Muy util.. Explicas muy bien

@jamevatutoriales 4 года назад

Muy buenos tus videos amigo Siempre aprendo mucho Esplicas excelente ÉXITOS!!!

@FalconMasters 4 года назад

Muchas gracias!

@alejandrorios6999 Год назад

gracias master por este tutorial. muy bueno todas las opciones que nos ofrece materialize para trabajar con carruseles.

@miguelangelbautistaantonio6077 3 года назад

Que buenos videos Falcon espero y sigas subiendo más de este tipo de contenido, saludos jefe.

@JoseManuel-MGM 4 года назад

Excelente video tutorial, lovoy a aplicar.

@camilabas4464 3 года назад

SOS EL PUTO AMO!! MUCHAS GRACIAS, ME QUEDO SUPER

@ngie-SL 11 месяцев назад

excelente video y explicaciòn por linea, me guie poco a poco y salio todo bien, al principio no por que omiti algunas mayúsculas, pero ya despúes todo bien. Muchas gracias!!!

@patriciaserrano33 3 года назад

Super genial, muchas gracias por tu conocimiento

@ivancaceres2357 4 года назад

muchas gracias por fin encuentro en slider que e querido aprender a hacer ya bastante tiempo gracias bro

@caseykalel 4 года назад

Épico Estuvo genial 😊😊

@pedrogonzalez1809 3 года назад

Gracias amigo por tus aportes excelente, saludos

@alexcoding7093 4 года назад

Muchas gracias por el tutorial, lo pude implementar en mi página y la verdad muy bueno, gracias.

@santiagorendon8357 3 года назад

Hola!!! Me ayudas porfa, es que lo inserto donde tengo el Header (el cual es el mismo que está en este canal) y no me quiere dar ;'v

@omarcastillo144 4 года назад

buen vídeo lo aplique en una pagina web y le gusto a mi profesor

@bygsbtechnology 3 года назад

Excelente explicación gracias !!!!

@user-hg9vo8wq5f 4 года назад

Buenisimo! Gracias por el aporte! =)

@leonardo6974 3 года назад

Funciona bien gente, por ahi es algun error de tipeo el que tienen, yo tarde un rato en encontrar los mios. gracias por el video,muy bueno.

@rosairarodriguez9959 3 года назад

Buen vídeo, Mil gracias!!!

@antoniorandisi3009 4 года назад

Saludos, excelente aporte, mucho exito...

@deshirerivas1652 4 года назад

Amo tus vídeos.

@frxngb 2 года назад

Buen video, claro y preciso

@cfhangelcfhangel9551 4 года назад

Gracias desde Santiago de Chile

@todobarato007 3 года назад

gracias dios te bendiga Arturo exitos

@arlez007 4 года назад

Te sigo desde hace tiempo y he aprendido mucho gracias a ti jaja, gracias y pues podrias tambien hacer un tutorial sobre websockets?

@RosiTerrab 2 года назад

Anduvo perfecto gracias !

@tennixtennis Год назад

amigooooooo, sos un genioooooooooooooooooo, mucha gracias por existirrrr

@josegustavobaquerogalindo 3 года назад

super me ayudo y aprendi a utilizar en algo javascript gracias

@aguss3163 Год назад

Sos un crack hermano, lo explicaste todo de una manera impecable, te felicito para tanta excelencia. me queria suscribir, pero me di cuenta de que ya estaba suscrito jajaja Abrazo grandee !

@FalconMasters Год назад

Muchas gracias!!

@fernandocuatrorivera 4 года назад

¡Gracias Crack!

@obistrain 3 года назад

Excelente, muchas gracias por el aporte, de hecho estoy tomando tu Curso Completo de Diseño Web Profesional en udemy, y en paralelo estoy realizando la pagina de la empresa donde trabajo, y este carrusel me gusto mucho! Gracias!

@FalconMasters 3 года назад

Me alegra mucho escuchar eso Omar, sigue asi!

@carlosleonardoavilesguerre5201 2 года назад

@@FalconMasters tendras el codigo completo ?

@FalconMasters 2 года назад

@@carlosleonardoavilesguerre5201 Si, esta en la descripción del video.

@carlosleonardoavilesguerre5201 2 года назад

@@FalconMasters pero ese es solo el codigo base que esta en el repositorio no ?

@FalconMasters 2 года назад

@@carlosleonardoavilesguerre5201 Lo que pasa es que esta en la branch master: github.com/falconmasters/carousel-materialize/tree/master

@pranksterr 2 года назад

Que tal muchas gracias por el tuto esta excelente, solo que por mas que le muevo no puedo cambiar el tamaño de la imagen lo puse tal cual lo indicas pero no cambia te agradecería si me pudieras apoyar

@thezamora1000 3 года назад

tus videos no fallan bien explicado todo, una duda como podria hacer que se cambien automaticamente las imagenes?

@OXGAMES_Z 3 года назад

Saludos FalconMasters, muchas gracias por el video. Por cierto tuve problemas al editar algunas cosas del materialize en el css y fue porque en el html en los src del header debía colocar primero el materialize y abajo el de estilos porque recordé que eso se ejecuta en forma de cascada y listo, entonces dejo esto por aquí si llega alguien con ese problema para que lo pueda corregir xD.

@davesadventures6 2 года назад

Me acabas de ilustrar brother me paso lo mismo y dije por que no jala y me acabas de recordar ese gran detalle gracias mi buen

@tobiasaltamirano7341 Год назад

hola, me podrías ayudar con esto? muchas gracias! 😁😁

@moonlix Год назад

yo l puse al inicio y mi menu cabezera tiene problemas igual :(

@Prisol666 11 месяцев назад

Hola! Lo pasé como sugeriste pero sigue sin correr mi carousel. Puse el enlace del materialize en el header antes del css. Tenés alguna sugerencia?

@largeraxis003 4 года назад

Hola falcon master una pregunta se podria aplicar este efecto en lugar de las flores y el texto en el video de la joyeria y como se podria implementar un saludo y gracias espero resuelvas mi duda

@shinigami0003 4 года назад

Eres el mejor!!!!

@rodrigoprecedo 2 года назад

Sos un genio!

@yersonbocanegraguerrero8343 4 года назад

Buen video Crack

@DavidTorres-gs9kx 4 года назад

Que crack!!! 👏👏👏👏

@antonywalderriosrojas2748 4 года назад

Eres un genio.

@ezq2604 4 года назад

hola como estas, me gustaría saber si pudieras hacer un vídeo explicando como hacer una imagen en un circulo y que el texto le rodee responsive

@choster9008 3 года назад

Una pregunta, las clases no chocan si trabajo com bootstrap y materialize al mismo tiempo ??

@avillamarin2007 2 года назад

Excelente, gracias

@vianeygonzalez7274 3 года назад

Hola muchas gracias, una pregunta cómo se podrían cambiar los colores de fondo?.

@gonzalezcabraleseduardopau1996 2 года назад

que tal amigo muy buen video, solo una duda cuando puse materialize me cambio el color del menu de navegacion sabes como podria resolver esto?

@ElOxigenado2003 4 года назад

capo, te quiero.

@raayzen Год назад

Gran vídeo, me gustó mucho como explicas. Disculpa una duda, está forma de carrusel se puede usar en lugar de imágenes, tablas y gráficas para un carrusel de reportes de datos??

@piaaguilarguerrero6250 Год назад

No sé si se puedan tablas, pero si y¿una imagen de ello, te dará libertad de diseño

@enriquesantiago8484 Год назад

hola buen dia! está super bien esta clase, muchisimas gracias. Estoy intentando insertarlo en un proyecto pero de desborda y en vez de quedarse centrado, se amplía el scroll de los laterales y no queda fijo en un solo sitio, por que me puede estar pasando esto?

@tomascabrera6933 2 года назад

Hola! No se porque no me funciona como se ve en el video, es la primera vez que me pasa. En concreto, la falla me ocurre antes del 13:40. Si alguien pudiera pasarme el codigo completo de la pagina, seria de gran ayuda. Muchas gracias

@ivandinelli579 3 года назад

Hola, siempre el contenedor tiene que ocupar ese tamaño? Digamos que yo quiero hacer eso pero en una pequeña sección de mi página, no quiero que la ocupe completamente

@tebii2008 4 года назад

buenas tardes te prefunto es posible hacer que el carrusel se mueva de manera automatica? interval 1000 milisegundos por ejemplo

@victorveracruz112 3 года назад

Buen video, gracias.. consulta y para que el carrusel se desplace en forma automática

@neveu10 2 года назад

Buen video, aunque no lo pude aplicar a mi proyecto ya que el framework me modifica todo y solo queria el carrusel. De todas formas, siempre traes buen material!!

@SaavJs Год назад

Lo mismo me ha pasado.

@stodani 2 года назад

se podrá hacer esto mismo pero en lugar de con imagenes, bloques de pagina que a su vez tengan links para ir a otras?

@CaldeCr4ck 4 года назад

Un grande

@mdyzzz Год назад

MUCHAS MUCHAS GRACIAS!! Estaba intente e intente, y este fue el unico video q funciono, enserio muchas gracias, llore de la felicidad

@FalconMasters Год назад

Me alegra que te sirviera :D

@maxix545 4 года назад

Como haria para escalarlo falcon? vi que puedo agregar la opcion de fullWidth, pero no me funciona

@daeldelacruz2664 3 года назад

súper interesante

@javierayala9479 3 года назад

hola falcon, compre tu curso de udemy de diseño y vi varios videos tuyos. quiero hacer varias galerias en la misma pagina. es decir, una foto que cuando le das click se abra y alla dos o tres fotos mas. como puedo hacerlo? me das una mano? muchas gracias

@enric086 4 года назад

Saludos Arturo, increíbles todos tus videos y tus cursos, gracias. Pregunta sobre este video, ¿En lugar de imágenes se pueden poner videos?

@facu1190 3 года назад

pudiste hacerlo?

@Henry_Nunez 3 года назад

Esta muy buena tu pregunta, si lo lograste por favor házmelo saber. De todos modos te voy a dar una idea: tómale un capture a la portada (miniatura) del video y colócala como jpg en el carrusel y me imagino que les asignará un link de esa imagen al video. 👍

@abadpani2140 4 года назад

Crack amigo

@aldogranda8261 3 года назад

Exelente explicacion.... solo quiciera saber si este carousel es responsive

@erickrichardyarlequebardal8744 Год назад

Es muy bueno el vídeo¿quisiera saber como has puesto el comentario con las lineas ?

@RodrigoQuintanaBaeza Год назад

Hola y gracias por la enseñanza, como lo hago para poner ventanas emergentes dentro de un carrusel?

@Artesaniasdechiapas 2 года назад

muy bien el video amigo se podra poner un link cada foto al hacer doble clic ?

@dreamwevermax2499 3 года назад

Se puede hacer ese proyecto responsive?

@Prisol666 11 месяцев назад

Buenísimo el vídeo, muchas gracias Falcon. Super claro y es cierto, es importante saber el uso de cada función. Copié todo tal cuál pero el carousel no me corre :( hasta puse, tal como sugirieron en los comentarios, en el HTML el enlace de materialize en el header pero tampoco. Si alguien tiene alguna sugerencia, los leo. Gracias!

@PakitoFleig 7 месяцев назад

El mismo problema tengo, no me corre. Los elementos salen totalmente separados e independientes.

@edwinalexadnerbernardinomo2486 Год назад

Hola, Excelente video una pregunta como hago para que el carrusel sea automatico, que las imagenes pasen solas.

@josephreyes5791 2 года назад

Quiero hacerlo pero para dos caruseles distintos, es posible?? Lo estoy intentando pero se afecta todo el proyecto y no me es posible usarlo para dos distintos, si es posible que cada uno cuente con propiedades distintas sin que afecte al otro ?

@jocksalo20 2 года назад

gracias

@user-rz4fi5cv8t 4 года назад

Eres el Mejoor sigue asi

@RickplusRick 3 года назад

tengo un problema a la hora de cargar la parte de java ya que no me aparecen las letras, sigo el proceso al pide de la letra pero no consigo hacer que corra mi programa, ser que intento aplicar el programa desde Python?, tiene algo que ver eso ?

@rolandochauca8452 3 года назад

Quisiera saber como agrandar un poco mas el carrusel que se vea mas grande en pantalla gracias por tu trabajo ayudas a muchas personas que estamos iniciando

@kentzamora8654 Год назад

Debes colocar la hoja de estilos después de la referencia de materialize. En tu css, en el atributo .carousel, vas cambiando la altura del div que contiene los elementos y en el atributo .carousel .carousel-item, que son los div que se mostraran en el carousel, vas cambiando la altura y el ancho a tu gusto. Un año tarde jajajaja pero al menos los siguientes ya sabrán como

@elmaguez 3 месяца назад

No entendi la parte de indicators porque en html no hay ningun div con las clases respectivas. Lo agregué en css pero no aparecen en la pagina.

@benactechno 2 года назад

cual extesion tenes para color de la letra de codigo?

@miguelmoyamontero5624 4 года назад

Hola Falcón gran video, podrías actualizar tu curso de JS no alcance a comprar tu curso un udemy. 😭😭🤝🤝

@samueslon365 3 года назад

Que crack, pero yo pensé que el código estaba completo SORETURO!

@danielvnzla6278 4 года назад

alguien sabe como cargo las diferentes rutas de mi aplicacion hecha con react en express?

@ngie-SL 11 месяцев назад

tengo una duda como hago para que el slider se pase en automático solito? una vez que se entra al apartado web en donde está colocado.

@andresarturoperezarango1026 2 года назад

Hola buen día. Hay posibilidad de ponerlo mas a la izquierda? Tan centrado no me sire, agradecería que me pudieras apoyar.

@alejandroochoa9541 3 года назад

Cuando añado el link del css de Materialze a al html, la configuración que tenía se pierde y toda mi página cambia de formato. Hay alguna forma de evitar esto?

@tusappsdeingresos1636 2 года назад

Me pasa lo mismo, lograste solucionarlo?

@alejandroochoa9541 2 года назад

@@tusappsdeingresos1636 No :/ por lo que leí, este framework incluye por defecto sus estilos y les pone una etiqueta que les da una mayor prioridad por sobre las de documento en el que estés escribiendo el CSS. Al final opté por hacerlo con JS.

@tusappsdeingresos1636 2 года назад

@@alejandroochoa9541 Ok, usaste swiper. js ?

@juliianhernandez1566 4 года назад

Hola Arturo, segu[i todos tus pasos pero los indicadores me quedan por fuera del carrusel y los carousel-item me quedan como a la mitad de pequeños de lo que te salen a ti y la letra se desborda :'( ... de dónde podré modificarlo .. Help ... gracias

@alexguzman3853 4 года назад

Esta genial sos un genio una consulta agrege la libreria materializa.css y modifica todo el estilo menu de nav. Etc lo cambia hasta el tamaño de todo en mi pagina Como hago para que no pase eso porfa 😥🤔

@tobiasaltamirano7341 Год назад

Hermano muy bueno tu video, te felicito! Tengo una consulta y me gustaría poder resolverla pero no encuentro la manera :/, por donde podría contactarme con vos?

@andreseduardolugogonzalez1778 2 года назад

Hola quiera saber como colocar el texto debajo de las fotos gracias :)

@alejandrorios6999 Год назад

como se puede crear ese efecto de deslizar la imagen unicamente con css y javascript puro?

@anh1113 4 года назад

A mi tambien me gustaria saber como hacer para que lo haga de forma automatica hasta que se pinche para pararlos, o que despues de un tiempo empiece a girar.

@AltoViajeBlog 2 года назад

Hola! El carrusel funciona perfecto. Solo tengo un problema. Yo lo quiero incluir en un proyecto que ya tengo avanzado, y al incluir los códigos de Materialize, el estilo de la librería me está afectando todo el proyecto. Hay alguna forma de que solo afecte el carrusel? Gracias.

@LuisAngel-uz3fx Год назад

Tenía el mismo problema, me parece que fue porque agregué el código de materialize en un archivo css y no con el cdn, esto estaba afectando los estilos del menú pero al desvincular el archivo css de marerialize y usar el cdn entonces solo el carrusel tomó los estilos

@peregrimtuk4652 Год назад

@@LuisAngel-uz3fx hola luis angel puedes explicarme un poco mejor esto? lo he itentado y no me funciona

@tobiasaltamirano7341 Год назад

@@LuisAngel-uz3fx hola, podrías explicarlo?

@moonlix Год назад

@@LuisAngel-uz3fx donde pusiste el enlace entonces?¿

@LuisAngel-uz3fx Год назад

@@peregrimtuk4652 claro solo debes agregar el link del cnd para css y js de materialize en el documento en el que está tu carrusel sólo ahí (en el vídeo es hacer solo el proceso del minuto 3:50 al 4:39)

@valenciaortizederyael2506 3 года назад

bro, después de eso que sigue? como lo subo a internet?

@danielspark128 3 года назад

te amo

@frankr9372 Год назад

me puede decir como le configuro mi visual studio code para que me autocomplete como el tuyo . por ejemplo cuando usted puso en el archivo css , "com2" se le autocompleto para hacer el comentario y cuando yo puse lo mismo nome autocompleta :)

@normaaliciagarciaramos3712 Год назад

Excelente tutorial muy bien explicado y entendible, realice el ejemplo en una pagina completamente nueva, pero ahora como puedo incrustar este código en una platilla ya establecida que tengo? al intentar ingresarlo se me modifica todo.

@antonyrangel2325 9 месяцев назад

tengo el mismo problema. Lograste solucionarlo?

@atalaya447 Год назад

Buenas tardes bendiciones amigo tutor en el div clas col antes del número dice me parece que colocaste un símbolo pero no alcanzo a ver qué símbolo es cuál es??

@franciscoespinosa9351 2 года назад

pero cuando agregaste el indicator-iteam dentro del html? fuera de eso muy buen trabajo... no entendi como entraste a una clase desde el css que no habias creado.