SLIDER RESPONSIVE with pure CSS | for your web page || MagtimusPro

[@liammedina]

Muchas gracias por tomarte el tiempo de explicar el paso a paso y mostrar todo. Excelente clase!

[@santosahernandezmendoza7147]

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.

[@VisualAvalon]

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

[@davesadventures6]

@@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

[@inversoresmc755]

Que bien eso está fabuloso. Y saludo a todos desde República Dominicana

[@TZAR_NSG]

Se nota cuando alguien realmente domina un tema, gracias.

[@alexisbello6516]

Excelente tutorial... Que expliquen así nuestros educadores

[@yaircarvajal3855]

Excelente aporte ! .. tuve un detalle con el tamaño pero ya lo fui ajustando ..

[@LuisLopez-gu8bc]

Me caga usar javascript, te mereces un like por el tutorial.

[@melanyperez3421]

Excelente! Recién lo termine! Muchísimas gracias por tu aporte. Super claro

[@VisualAvalon]

Muchísimas por tu comentario me es muy motivador. Me alegro mucho poderte haber ayudado. Saludos!

[@melanyperez3421]

Gracias a vos, me reía con la parte de 5px no mejor 4px, no 5px jajajaja

[@VisualAvalon]

Jajajajajajajaja si es que antes yo hacía los proyectos en vivo, improvisados.

[@victorbrave466]

Bueno, simple y adaptable a cualquier proyecto!

[@rodymichel]

hola saludos desde argentina gracias por el aporte excelente video.

[@leosalomon]

Hola que tal muy lindo el carrucel pero consulta la paginaciopn de izquierda y derecha es decir los botones , como se agregan!!

[@victormarin8940]

El símbolo del min 20:10 se llama Virgulilla y se escribe con alt+126 en el teclado Español

[@juanjoseflorestorres5465]

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.

[@daniel-24gra79]

crack maquina, number one, mastodonte sos un duro man muchisimas gracias

[@normasoto4411]

muchas gracias!!! me aclaraste muchas dudas!!! eres un sol!!!!!

[@BlueMoises96]

gracias por compartir tus conocimientos.

[@ingridavila3618]

Muy bueno, muchas gracias , muy buena tu forma de explicar...

[@MiikeEnCiel]

Excelente aporte. Muchas gracias.

[@JavierMarinSuaza]

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

[@jeycolon]

Excelente contenido brother, saludos y espero que estés muy pero muy bien, saludos desde Colombia

[@mto8a]

Te pinches amo, justo lo que buscaba para mi sitio estático. Suscrito 🤝

[@felipecalderon652]

Excelente muchas gracias! saludos de México!

[@UnknwnCO]

Wow me gusta mucho la nueva intro, al fin un Slider que se puede hacer responsive sin falls

[@joelventura76]

kzbin.info/www/bejne/jHfTh4Vjf9V3jpY

[@frxngb]

Excelente video, muchas gracias

[@levisunexpo]

Gracias por el conocimiento aportado.

[@marcoesteban1571]

Muchísimas gracias, si lo pude introducir muy bien a mi proyecto

[@julianalonso8441]

Oye pasame el código.

[@julianalonso8441]

Es que no se, pero no me sirve como quiero, te lo agradecería

[@Zelevf]

Muy bueno explicando, muchas gracias.

[@Blue04516]

Excelente tutorial, me encantó tu manera de explicar

[@cubitodetetris7932]

increible video, gracias, ya solo tengo el problema de que al darle click no se detiene

[@NANAPATY]

Excelente, mil gracias por el tutorial

[@lacasadellavado3243]

Excelente tutorial!!!

[@carlosgomezatena4575]

hola buenas estoy iniciando en el tema de html y css y tengo el problema que no me toma los estilos css

[@EsoShitlin]

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?

[@rodrigocastrocaroca4386]

muchas gracias amigo

[@catherinvargas2866]

Está increíble tu tutorial, muchas gracias :)

[@berticalle8816]

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 ?

[@rubiii_]

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?

[@camilamaita8890]

El mejor tutorial!!

[@camiloarango7806]

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

[@LauraMartinez-ce5nu]

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....

[@VideosPedorros10]

Me pasa lo mismo :c

[@JSOLEDIA]

Genial la explicación y tu código. Me pregunto si en lugar de imagens se puede hacer con textos?

[@anakarina74]

tengo entendido q si en lugar de la etiqueta, "" colocas una "" o una lo q corre es el texto en vez de una imagen

[@nelocampos5645]

que pasa si quiero agregar mas fotos...GRACIAS

[@marcosrafaelrodriguezherna3897]

amigo explicas muy bien pero tengo un problema para ajustar las imagenes :c

[@Hu6uinho]

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

[@camlainez]

Hola, ya no sale el link, tendrás de casualidad una forma alterna de descargar el código?

[@AnonyGamerv]

donde puedo conseguir el codigo? ya que la pagina que esta no sale nada

[@jonmaz9]

Disculpa le quiero poner un texto y no aparece sobre las imágenes sabrás porque ?

[@daniloriveroperez1630]

de que tamaño son las iamgenes?

[@nicocorzi]

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.

[@AndresParra-vw1zz]

muy bonito eres un genio

[@joelventura76]

kzbin.info/www/bejne/jHfTh4Vjf9V3jpY

[@tatan6815]

como se le puede agregar para que sea automatico?

[@rocioheredia4079]

Hola, intenté hacerlo, pero los input no responden cuando le hago clic.

[@facundonieto1330]

Una pregunta lo pregunto ante el total desconocimiento. Este código lo puedo poner en blogger?

[@andrerodriguez820]

sos un DIOS

[@alexissm6760]

Proyecto caído. ¿no hay forma de que compartas de nuevo el código?

[@lonewolf8473]

chicos alguno de ustedes tuvo problemas con el keyframe? a la hora de llamar el autoplay no lo agarra

[@MrMfernan]

Alguno sabe como se hace con mas imagenes? osea el calculo dentro del transform 3D es igual?

[@Champi910]

Hola, cómo se llama el tema o extensión de Brackets para hacer ese efecto de explosión al momento de escribir?

[@VisualAvalon]

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!

[@joseuzqueda140]

Buenardoo..

[@bastianframe6442]

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.

[@sebastianrodriguezpenagos4831]

podrias explicar mas a detalle el uso de ~? de antemano muchas gracias

[@nyx4436]

yo creo que seria un: if else

[@vidainformatico-as]

buenazo

[@xXkeissiusXx]

Ya no esta disponible el código del proyecto :(

[@Sebastian-Rift]

que tal MagtimusPro una consulta, en el caso de ser mas imagenes cual seria el ejemplo?.. muchas gracias

[@gabrielpmed3510]

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)

[@yasserespinoza1315]

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

[@anthonyalvarez3818]

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?

[@anakarina74]

en vez de colocar las imágenes en la paginación , deberías colocar iconos y posicionarlos a través de css

[@jarisdajomes]

Como inserto ese carrusel en una pagina ya existente

[@FranciscoCastilleja_555]

una pregunta, cuando tecleas el efecto que sale es editado o hay un efecto para que al teclear se vea?

[@VisualAvalon]

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

[@FranciscoCastilleja_555]

@@VisualAvalon GRACIAS CAMPEON

[@choliski1617]

@@VisualAvalon Hola magtimus, solo lo instalo o hay alguna forma de activarlo

[@VisualAvalon]

@@choliski1617 Hola! para activarlo debes hacer la siguiente combinación de teclas, que son: [Ctrl] + [Alt] + [0](Cero). Saludos, Éxito!

[@choliski1617]

@@VisualAvalon Muchas gracias, saludos

[@adrianwagner7106]

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

[@anakarina74]

tengo entendido q si se puede, colocando las etiquetas o y dentro un

[@adrianroman4946]

Se ha caído el link para descargar el proyecto

[@jesusfranco8655]

hola amigo, me podrias apoyar con el codigo por favor. el link no funciona.

[@Unimaz_Studios]

Link del proyecto caido

[@Lidor-gu6jf]

Funciona, pero pasa sobre mi NAV :c ayuda!! Que le debo cambiar?

[@sebastianaminfarina1515]

No me carga la 4 imaganes si coloco

[@DavidRamirez-nk5sr]

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!!!!

[@gabrielpmed3510]

¿Ya intentaste la bulgar manera de ponerlo dentro de un divisor y dentro de este solamente centrarlo? Es burdo pero podría funcionar

[@deatherzeck156mew]

y si fueran 4 imagenes ¿cómo sería el porcentaje en el keyframe?

[@diegomedflo]

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?

[@ImWolfJulio]

con transition-duration o animation-duration depende.

[@cevallos7]

me pasa lo mismo, encontro como hacer que las imagenes dure mas?

[@fcode9570]

:O Está muy profesional

[@joelventura76]

kzbin.info/www/bejne/jHfTh4Vjf9V3jpY

[@cristianyahirperezvides2799]

hey eres el mejor me sirvió gracias pero no esta bien escrito el código de la descripción

[@UrraSergio]

Hola, ¿alguien tiene el código? Lo hice hace un tiempo y ahora no lo encuentro. GRACIAS de antemano :)

[@danielgarrido4841]

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?

[@axelux_ve]

Object fit

[@gloriosapresencialive8497]

excelente vídeo, revisa los links de descarga y apoyo, al parecer no funcionan ....

[@NikoSkuall]

estan caidos los link :( alguien lo tiene gracias

[@moigami2]

Sou seu Fã. Bom dia...

[@devikcode6308]

los links no funcionan

[@Anthonypvp1]

Queria aprender algo nuevo y solo es pedirlo para tenerlo😂😂😂

[@VisualAvalon]

Jajajaja así si es buenoooo jajaja... saludos.

[@Anthonypvp1]

@@VisualAvalon 😂😂😂

[@JymmyHands]

Hola, en mi caso los sliders se ven muy a la izquierda, como lo puedo solucionar

[@JymmyHands]

tengo 4 imagenes en el slider

[@JymmyHands]

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

[@nyx4436]

Ya revisaste todo tu codigo?, ve el video otra vez pq....... a mi me funciono 10/10

[@scarlettfiredark9900]

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 🤗🤗🤗🤗🤗🤗

[@juanjoseflorestorres5465]

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.

[@loor9925]

intenta posicionarlos en el eje z

[@brucorpparatodos5997]

como lo haces más grande?

[@brucorpparatodos5997]

que ocupe toda la pantalla

[@daeldelacruz2664]

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

[@Immm_jess]

Como hago para que la imagen coja la pantalla completa ?

[@diegomedflo]

Cabmia el max.width a 100%, está en 1000px

[@marlonorozco2247]

link caido

[@styleceylys7351]

ya no funciona la url😒😒😒😒

[@ACaro-ux2ts]

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.

[@christophersotoarevalo7310]

codigo'

[@salvadorsarabiaorea105]

Podría mejorarse cambiando de imágenes de Horizontal a Vertical con media queries? (Para llenar siempre la pantalla)

[@dkdoblajes4748]

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.

[@rafaelpena9915]

Hola patricia si es posible, descargate todos los archivos del Github luego elimina el estilo que se le asigna al body.

[@leandroacuna5159]

itinereishon

[@NeekaRostran]

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!!