Desearía tanto Magtimus que se te reconociera en esta vida lo grande que eres. Admiro tus trabajos porque comprendiéndolos me siento cerca a la Divinidad.
Guaoooooo! Muchísimas graciaaaas... La verdad es que al ver comentarios como estos es como que si 100 mil personas siguieran lo que hago. Gracias amigo, Saludos
@@VisualAvalon Tiene razón el compa de arriba, la neta eres un Deus veo cada uno de tus videos y no me pierdo los que vas sacando eres grande Brother, no dejes de hacer videos por fa
Hola, genial con weebly tenia un problema no funciona insertar dos showslide en la misma pagina y con este método todo perfecto funciona de maravilla mil gracias. Un cordial saludo.
Muchas gracias por tu tiempo y por compartir tus conocimientos, ha sido un excelente video para una galeria de imagenes muy novedosa le da mucha vida a la pagina web recomendado al 100 % Saludos y muchas Bendiciones
hola buenas el video me ha parecido muy interesante por lo que querría introducirlo en mi proyecto, pero tengo una de duda cual es el tamaño de tus imagenes ?
Muy buen vídeo, pero tengo una duda, quiero poner otro debajo de ese con diferentes imágenes, tendría que hacer el mismo código pero con nombres de las clases distintas?
Hola! me ha encantado este video y el slider es genial, ya lo usé... pero quería saber, hay alguna manera de, al correr los 6,5seg de la animación, pausar en la tercera imagen , digamos 4segundos, y después volver a correr la animación? Ojalá puedas ayudarme, no logro conseguirlo....
Hola amigo y hermano latino! gracias por compartir tan valiosa información. en la parte del calculo para que el slider haga su efecto, A demás de que las imágenes tengan las mismas dimensiones, ¿cuál debería ser la fórmula u operación matemática en cuanto a los porcentajes en el transform:translate3d? ¡Es que lo hice con 4 imágenes y al momento de hacer clic en alguna de las imágenes de pagination, se desplaza, pero desaparecen las imágenes de paginación… ¡Me podrías ayudar con esta duda, amigo!! Muchas gracias por tu apoyo y directriz.
Muy buen video amigo, sencillo y lindo la verdad. Aunque tengo una duda, como podría ponerles flechas a los laterales, para que cambien la imagen por el slider?
Hola, el tutorial está excelente, ya pude cambiar las imágenes de tamaño también en photoshop, solo que ahora me quedan mas cortas y no quedan ajustadas, como puedo solucionar eso?
voy comenzando la Ing. pero Primero: el número de imágenes lo mas a dividir entre el 100%, en este ejemplo se dividió en 3 y por eso iba de 33 en 33 en los primeros 2 ejemplos pero el último no fue 99 sino redondeó a 100 (en la parte de los @keyframes autoplay del css) Segundo: Los input[id="1"]:checked ~ .slide{ son 1 2 y 3 y si quieres mas copia y pega hasta llegar al número de imagenes que haz agregado. Tercero: igualmente son 1, 2 y 3 porque son 3 imágenes o elementos, así que vas a copiar y pegar hasta el número de imágenes que vayas a agregar. Cuarto y último: si quieres mas de 3 imagenes copiaras todo tu divisor y pegaras, la imagen 4 sería y su label class="pagination-item" for="4"> sera con el 4... a mi no me salió a la primera y me di cuenta que mis imágenes eran muy pequeñas en comparación las del ejemplo así que tuve que ajustar las imágenes (aunque también se podia ajustar del img el widht y height)
Hola que tal, esa extensión se llama "Brackets Power Mode"... Puedes buscar en el canal, donde muestro todas las extensiones de Brackets que utilizo. Saludos!
yo le metí captions h3 y p, y no se hizo el responisive en los textos así que le metí un @media, pero no me funciona, el responsive, y tampoco se mueve automático, eso si se ve muy bien
Tengo un problemita y no se en donde. Lo que pasa es que trato de volver del segundo slide al primero y no se desmarca el segundo y tampoco va al primero, solo avanza hacia la derecha o de 1 al 2 (por ejemplo) pero volver ya no que sera?
AYUDA!!! Al dar click en los botones, me parece que es en la paginación ya que hice paso a paso todo, NO para en la imagen señalada, continua... Me podrán ayudar? Otra: Podría poner flechas en los laterales para que además de los botones pueda deslizar a la imagen deseada.
Hola buenas tardes, una pregunta como puedo poner el slide debajo de un menu? Segui todos tus pasos pero me quedo muy arriba xD, saludos desde argentina 🤗🤗🤗🤗🤗🤗
Muy bonito, pero no hay manera de concordar en un mismo proyecto dos tutoriales tuyos. Este en concreto no me aparecen las miniaturas abajo del slider, me va muy rápido y no es responsive. Creo que deberías repetirlo o mejor, haz una home completa con menu, slider y contenido por favor.
Hola, buen tuto la lástima que al intentar descargar código : Amenaza detectada Esta página web puede contener contenido peligroso que puede proporcionar acceso remoto a un dispositivo infectado, filtrar datos confidenciales del dispositivo o dañar el dispositivo de destino.
esto sucede cuando coloco dentro de: .container-all{ max-width: 100%; y lo he probado con 3 imágenes también y lo mismo, deja un espacio a la derecha y a partir del segundo slider da la sensación de que está muy a la izquierda
SIEMPRE LO MISMO COSA, MAQUETAN EL BODY PARA EL CARRUSEL Y ESTE AFECTA LOS DEMAS COMPONENTES, HEADER, NAVBAR, MAIN Y FOOTER. SI VAMOS A INCLUIR UN CARRUSEL TIENE QUE SER DESDE SU ELEMENTO PADRE, HTML 100%, BODY min-height: 100vh; .conteiner { position: flex; Justify-content, position, align, como sea.. } Piensalo y hazlo otra vez desde su elemento padre para asi nosotros poder incluurlo en nuestro website. Gracias!!
Muchas gracias por tomarte el tiempo de explicar el paso a paso y mostrar todo. Excelente clase!
Desearía tanto Magtimus que se te reconociera en esta vida lo grande que eres. Admiro tus trabajos porque comprendiéndolos me siento cerca a la Divinidad.
Guaoooooo! Muchísimas graciaaaas... La verdad es que al ver comentarios como estos es como que si 100 mil personas siguieran lo que hago. Gracias amigo, Saludos
@@VisualAvalon Tiene razón el compa de arriba, la neta eres un Deus veo cada uno de tus videos y no me pierdo los que vas sacando eres grande Brother, no dejes de hacer videos por fa
Se nota cuando alguien realmente domina un tema, gracias.
Que bien eso está fabuloso.
Y saludo a todos desde República Dominicana
Excelente tutorial... Que expliquen así nuestros educadores
Me caga usar javascript, te mereces un like por el tutorial.
Bueno, simple y adaptable a cualquier proyecto!
Hola, genial con weebly tenia un problema no funciona insertar dos showslide en la misma pagina y con este método todo perfecto funciona de maravilla mil gracias. Un cordial saludo.
Excelente aporte ! .. tuve un detalle con el tamaño pero ya lo fui ajustando ..
Excelente! Recién lo termine! Muchísimas gracias por tu aporte. Super claro
Muchísimas por tu comentario me es muy motivador. Me alegro mucho poderte haber ayudado. Saludos!
Gracias a vos, me reía con la parte de 5px no mejor 4px, no 5px jajajaja
Jajajajajajajaja si es que antes yo hacía los proyectos en vivo, improvisados.
hola saludos desde argentina gracias por el aporte excelente video.
Wow me gusta mucho la nueva intro, al fin un Slider que se puede hacer responsive sin falls
ua-cam.com/video/VFpVR-JpDX4/v-deo.html
Hola que tal muy lindo el carrucel pero consulta la paginaciopn de izquierda y derecha es decir los botones , como se agregan!!
El símbolo del min 20:10 se llama Virgulilla y se escribe con alt+126 en el teclado Español
crack maquina, number one, mastodonte sos un duro man muchisimas gracias
Muchas gracias por tu tiempo y por compartir tus conocimientos, ha sido un excelente video para una galeria de imagenes muy novedosa le da mucha vida a la pagina web recomendado al 100 %
Saludos y muchas Bendiciones
gracias por compartir tus conocimientos.
Excelente aporte.
Muchas gracias.
Te pinches amo, justo lo que buscaba para mi sitio estático. Suscrito 🤝
muchas gracias!!! me aclaraste muchas dudas!!! eres un sol!!!!!
Excelente muchas gracias! saludos de México!
Muy bueno, muchas gracias , muy buena tu forma de explicar...
increible video, gracias, ya solo tengo el problema de que al darle click no se detiene
Excelente video, muchas gracias
Gracias por el conocimiento aportado.
Excelente contenido brother, saludos y espero que estés muy pero muy bien, saludos desde Colombia
Muy bueno explicando, muchas gracias.
Excelente tutorial, me encantó tu manera de explicar
Muchísimas gracias, si lo pude introducir muy bien a mi proyecto
Oye pasame el código.
Es que no se, pero no me sirve como quiero, te lo agradecería
Excelente, mil gracias por el tutorial
El mejor tutorial!!
Excelente tutorial!!!
hola buenas el video me ha parecido muy interesante por lo que querría introducirlo en mi proyecto, pero tengo una de duda
cual es el tamaño de tus imagenes ?
Muy buen vídeo, pero tengo una duda, quiero poner otro debajo de ese con diferentes imágenes, tendría que hacer el mismo código pero con nombres de las clases distintas?
Hola! me ha encantado este video y el slider es genial, ya lo usé...
pero quería saber, hay alguna manera de, al correr los 6,5seg de la animación, pausar en la tercera imagen , digamos 4segundos, y después volver a correr la animación?
Ojalá puedas ayudarme, no logro conseguirlo....
Me pasa lo mismo :c
muchas gracias amigo
Está increíble tu tutorial, muchas gracias :)
Genial la explicación y tu código. Me pregunto si en lugar de imagens se puede hacer con textos?
tengo entendido q si en lugar de la etiqueta, "" colocas una "" o una lo q corre es el texto en vez de una imagen
amigo explicas muy bien pero tengo un problema para ajustar las imagenes :c
sos un DIOS
muy bonito eres un genio
ua-cam.com/video/VFpVR-JpDX4/v-deo.html
Buenardoo..
:O Está muy profesional
ua-cam.com/video/VFpVR-JpDX4/v-deo.html
Hola amigo y hermano latino! gracias por compartir tan valiosa información. en la parte del calculo para que el slider haga su efecto, A demás de que las imágenes tengan las mismas dimensiones, ¿cuál debería ser la fórmula u operación matemática en cuanto a los porcentajes en el transform:translate3d? ¡Es que lo hice con 4 imágenes y al momento de hacer clic en alguna de las imágenes de pagination, se desplaza, pero desaparecen las imágenes de paginación… ¡Me podrías ayudar con esta duda, amigo!! Muchas gracias por tu apoyo y directriz.
Muy buen video amigo, sencillo y lindo la verdad. Aunque tengo una duda, como podría ponerles flechas a los laterales, para que cambien la imagen por el slider?
en vez de colocar las imágenes en la paginación , deberías colocar iconos y posicionarlos a través de css
buenazo
podrias explicar mas a detalle el uso de ~?
de antemano muchas gracias
yo creo que seria un: if else
Magnus podrías volver a poner los archivos dónde están el slider, que en la página ya no dan, dice que no se encuentra esa dirección
Hola, el tutorial está excelente, ya pude cambiar las imágenes de tamaño también en photoshop, solo que ahora me quedan mas cortas y no quedan ajustadas, como puedo solucionar eso?
Object fit
hey eres el mejor me sirvió gracias pero no esta bien escrito el código de la descripción
Una pregunta lo pregunto ante el total desconocimiento. Este código lo puedo poner en blogger?
Sou seu Fã. Bom dia...
Esta perfecto, pero una pergunta. Tengo 3 imagenes tambien y en el segundo slider solo dura 1 segundo. ¿cómo pueod hacer para que dure más?
con transition-duration o animation-duration depende.
me pasa lo mismo, encontro como hacer que las imagenes dure mas?
que tal MagtimusPro una consulta, en el caso de ser mas imagenes cual seria el ejemplo?.. muchas gracias
voy comenzando la Ing. pero Primero: el número de imágenes lo mas a dividir entre el 100%, en este ejemplo se dividió en 3 y por eso iba de 33 en 33 en los primeros 2 ejemplos pero el último no fue 99 sino redondeó a 100 (en la parte de los @keyframes autoplay del css) Segundo: Los input[id="1"]:checked ~ .slide{ son 1 2 y 3 y si quieres mas copia y pega hasta llegar al número de imagenes que haz agregado. Tercero: igualmente son 1, 2 y 3 porque son 3 imágenes o elementos, así que vas a copiar y pegar hasta el número de imágenes que vayas a agregar. Cuarto y último: si quieres mas de 3 imagenes copiaras todo tu divisor y pegaras, la imagen 4 sería y su label class="pagination-item" for="4"> sera con el 4... a mi no me salió a la primera y me di cuenta que mis imágenes eran muy pequeñas en comparación las del ejemplo así que tuve que ajustar las imágenes (aunque también se podia ajustar del img el widht y height)
que pasa si quiero agregar mas fotos...GRACIAS
muy bien el video pero tengo un problema los 3 cuadritos de la pagination items solo se quedan en la imagen principal y en las otras no
Hola, cómo se llama el tema o extensión de Brackets para hacer ese efecto de explosión al momento de escribir?
Hola que tal, esa extensión se llama "Brackets Power Mode"... Puedes buscar en el canal, donde muestro todas las extensiones de Brackets que utilizo. Saludos!
una pregunta, cuando tecleas el efecto que sale es editado o hay un efecto para que al teclear se vea?
Es un plugin que he instalado a mi editor de texto, el plugin se llama: Brackets Power Mode...
Y el editor de texto se llama: Brackets
Saludos
@@VisualAvalon GRACIAS CAMPEON
@@VisualAvalon Hola magtimus, solo lo instalo o hay alguna forma de activarlo
@@choliski1617 Hola! para activarlo debes hacer la siguiente combinación de teclas, que son: [Ctrl] + [Alt] + [0](Cero).
Saludos, Éxito!
@@VisualAvalon Muchas gracias, saludos
yo le metí captions h3 y p, y no se hizo el responisive en los textos así que le metí un @media, pero no me funciona, el responsive, y tampoco se mueve automático, eso si se ve muy bien
hola buenas estoy iniciando en el tema de html y css y tengo el problema que no me toma los estilos css
de que tamaño son las iamgenes?
excelente vídeo, revisa los links de descarga y apoyo, al parecer no funcionan ....
Tengo un problemita y no se en donde. Lo que pasa es que trato de volver del segundo slide al primero y no se desmarca el segundo y tampoco va al primero, solo avanza hacia la derecha o de 1 al 2 (por ejemplo) pero volver ya no que sera?
Disculpa le quiero poner un texto y no aparece sobre las imágenes sabrás porque ?
AYUDA!!! Al dar click en los botones, me parece que es en la paginación ya que hice paso a paso todo, NO para en la imagen señalada, continua... Me podrán ayudar?
Otra: Podría poner flechas en los laterales para que además de los botones pueda deslizar a la imagen deseada.
Queria aprender algo nuevo y solo es pedirlo para tenerlo😂😂😂
Jajajaja así si es buenoooo jajaja... saludos.
@@VisualAvalon 😂😂😂
Hola, ya no sale el link, tendrás de casualidad una forma alterna de descargar el código?
dentro de cada segmeneto puedo colocar un div que contenga texto y varias imagenes con links a otras paginas?
me ayudarias muchisimo con tu respuesta
tengo entendido q si se puede, colocando las etiquetas o y dentro un
como se le puede agregar para que sea automatico?
Alguno sabe como se hace con mas imagenes? osea el calculo dentro del transform 3D es igual?
donde puedo conseguir el codigo? ya que la pagina que esta no sale nada
Hola buenas tardes, una pregunta como puedo poner el slide debajo de un menu? Segui todos tus pasos pero me quedo muy arriba xD, saludos desde argentina 🤗🤗🤗🤗🤗🤗
y si fueran 4 imagenes ¿cómo sería el porcentaje en el keyframe?
Funciona, pero pasa sobre mi NAV :c ayuda!! Que le debo cambiar?
Proyecto caído. ¿no hay forma de que compartas de nuevo el código?
Hola, intenté hacerlo, pero los input no responden cuando le hago clic.
Como inserto ese carrusel en una pagina ya existente
Hola, ¿Se podría añadir flechas a este tipo de slider?. por ejemplo: ⇦
⇨ lo he intentado pero ni salen en el slide. Un saludo.
intenta posicionarlos en el eje z
Muy bonito, pero no hay manera de concordar en un mismo proyecto dos tutoriales tuyos. Este en concreto no me aparecen las miniaturas abajo del slider, me va muy rápido y no es responsive. Creo que deberías repetirlo o mejor, haz una home completa con menu, slider y contenido por favor.
Hola patricia si es posible, descargate todos los archivos del Github luego elimina el estilo que se le asigna al body.
se puede centrar de otra manera?? esque se me queda al lado izquierdo y si cambio la parte de body todo se me desorganiza, por fa ayuda!!!!
¿Ya intentaste la bulgar manera de ponerlo dentro de un divisor y dentro de este solamente centrarlo? Es burdo pero podría funcionar
Link del proyecto caido
Ya no esta disponible el código del proyecto :(
No me carga la 4 imaganes si coloco
chicos alguno de ustedes tuvo problemas con el keyframe? a la hora de llamar el autoplay no lo agarra
hola amigo, me podrias apoyar con el codigo por favor. el link no funciona.
Se ha caído el link para descargar el proyecto
Hola, ¿alguien tiene el código? Lo hice hace un tiempo y ahora no lo encuentro.
GRACIAS de antemano :)
Hola, buen tuto la lástima que al intentar descargar código :
Amenaza detectada
Esta página web puede contener contenido peligroso que puede proporcionar acceso remoto a un dispositivo infectado, filtrar datos confidenciales del dispositivo o dañar el dispositivo de destino.
itinereishon
Hola, en mi caso los sliders se ven muy a la izquierda, como lo puedo solucionar
tengo 4 imagenes en el slider
esto sucede cuando coloco dentro de: .container-all{ max-width: 100%; y lo he probado con 3 imágenes también y lo mismo, deja un espacio a la derecha y a partir del segundo slider da la sensación de que está muy a la izquierda
Ya revisaste todo tu codigo?, ve el video otra vez pq.......
a mi me funciono 10/10
animeishon
como lo haces más grande?
que ocupe toda la pantalla
Como hago para que la imagen coja la pantalla completa ?
Cabmia el max.width a 100%, está en 1000px
Yo he hecho todos esos
códigos que tu hiciste y yo
me e matodo haciendo slider pero ninguna cosa y ningún video funciona
estan caidos los link :( alguien lo tiene gracias
los links no funcionan
link caido
codigo'
SIEMPRE LO MISMO COSA, MAQUETAN EL BODY PARA EL CARRUSEL Y ESTE AFECTA LOS DEMAS COMPONENTES, HEADER, NAVBAR, MAIN Y FOOTER.
SI VAMOS A INCLUIR UN CARRUSEL TIENE QUE SER DESDE SU ELEMENTO PADRE, HTML 100%, BODY min-height: 100vh;
.conteiner {
position: flex;
Justify-content, position, align, como sea..
}
Piensalo y hazlo otra vez desde su elemento padre para asi nosotros poder incluurlo en nuestro website. Gracias!!
ya no funciona la url😒😒😒😒