Тёмный

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

VisualAvalon
Подписаться 52 тыс.
Просмотров 47 тыс.
50% 1

This time I will be teaching you how you can do a SLIDER with pure CSS, so that you can implement it in what is your web page. All this will be created in a very easy and well explained way.
♦ Tutorial resources - DOWNLOAD PROJECT
tiny.cc/yk455y
♦ SUPPORT US - Acquire your template in TemplateMonster
tiny.cc/o5sv3y
Do not forget → SUBSCRIBE AND ACTIVATE THE CAMPANA
♦ About MagtimusPro
Website: goo.gl/EENS5R
Facebook: goo.gl/b43uMg
Instagram: goo.gl/KTMrHS
Twitter: goo.gl/eSdguk
GitHub: goo.gl/WvYTsq
RU-vid: goo.gl/fMD3XB
Pinterest: goo.gl/dpHekf

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

 

28 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 145   
@liammedina
@liammedina 4 месяца назад
Muchas gracias por tomarte el tiempo de explicar el paso a paso y mostrar todo. Excelente clase!
@alexisbello6516
@alexisbello6516 2 года назад
Excelente tutorial... Que expliquen así nuestros educadores
@LuisLopez-gu8bc
@LuisLopez-gu8bc 4 года назад
Me caga usar javascript, te mereces un like por el tutorial.
@JavierMarinSuaza
@JavierMarinSuaza 4 года назад
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
@ingridavila3618
@ingridavila3618 3 года назад
Muy bueno, muchas gracias , muy buena tu forma de explicar...
@Zelevf
@Zelevf 4 года назад
Muy bueno explicando, muchas gracias.
@BlueMoises96
@BlueMoises96 4 года назад
gracias por compartir tus conocimientos.
@LauraMartinez-ce5nu
@LauraMartinez-ce5nu 3 года назад
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
@VideosPedorros10 2 года назад
Me pasa lo mismo :c
@rocioheredia4079
@rocioheredia4079 2 года назад
Hola, intenté hacerlo, pero los input no responden cuando le hago clic.
@lonewolf8473
@lonewolf8473 Год назад
chicos alguno de ustedes tuvo problemas con el keyframe? a la hora de llamar el autoplay no lo agarra
@catherinvargas2866
@catherinvargas2866 3 года назад
Está increíble tu tutorial, muchas gracias :)
@frxngb
@frxngb 2 года назад
Excelente video, muchas gracias
@jonmaz9
@jonmaz9 3 года назад
Disculpa le quiero poner un texto y no aparece sobre las imágenes sabrás porque ?
@NANAPATY
@NANAPATY 3 года назад
Excelente, mil gracias por el tutorial
@MrMfernan
@MrMfernan 4 года назад
Alguno sabe como se hace con mas imagenes? osea el calculo dentro del transform 3D es igual?
@facundonieto1330
@facundonieto1330 5 лет назад
Una pregunta lo pregunto ante el total desconocimiento. Este código lo puedo poner en blogger?
@AnonyGamerv
@AnonyGamerv 2 года назад
donde puedo conseguir el codigo? ya que la pagina que esta no sale nada
@jarisdajomes
@jarisdajomes 3 года назад
Como inserto ese carrusel en una pagina ya existente
@jesusfranco8655
@jesusfranco8655 Год назад
hola amigo, me podrias apoyar con el codigo por favor. el link no funciona.
@adrianroman4946
@adrianroman4946 2 года назад
Se ha caído el link para descargar el proyecto
@tatan6815
@tatan6815 2 года назад
como se le puede agregar para que sea automatico?
@deatherzeck156mew
@deatherzeck156mew 4 года назад
y si fueran 4 imagenes ¿cómo sería el porcentaje en el keyframe?
@camilamaita8890
@camilamaita8890 2 года назад
El mejor tutorial!!
@rodrigocastrocaroca4386
@rodrigocastrocaroca4386 3 года назад
muchas gracias amigo
@daeldelacruz2664
@daeldelacruz2664 3 года назад
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
@Unimaz_Studios
@Unimaz_Studios 4 года назад
Link del proyecto caido
@scarlettfiredark9900
@scarlettfiredark9900 2 года назад
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
@juanjoseflorestorres5465 4 года назад
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
@loor9925 2 года назад
intenta posicionarlos en el eje z
@joseuzqueda140
@joseuzqueda140 4 года назад
Buenardoo..
@andrerodriguez820
@andrerodriguez820 4 года назад
sos un DIOS
@Anthonypvp1
@Anthonypvp1 5 лет назад
Queria aprender algo nuevo y solo es pedirlo para tenerlo😂😂😂
@VisualAvalon
@VisualAvalon 5 лет назад
Jajajaja así si es buenoooo jajaja... saludos.
@Anthonypvp1
@Anthonypvp1 5 лет назад
@@VisualAvalon 😂😂😂
@Immm_jess
@Immm_jess 5 лет назад
Como hago para que la imagen coja la pantalla completa ?
@diegomedflo
@diegomedflo 4 года назад
Cabmia el max.width a 100%, está en 1000px
@christophersotoarevalo7310
@christophersotoarevalo7310 2 года назад
codigo'
@salvadorsarabiaorea105
@salvadorsarabiaorea105 2 года назад
Podría mejorarse cambiando de imágenes de Horizontal a Vertical con media queries? (Para llenar siempre la pantalla)
@PEDROCORTEZQUISPE
@PEDROCORTEZQUISPE 4 года назад
es una porkeria si no tiene un stoper de imagenes, cualquiera puede hacer eso
@nyx4436
@nyx4436 4 года назад
Has uno mejor tú pues, CRACK
@lendo9362
@lendo9362 3 года назад
amigo el link para descagar el proyecto no sirve
@victormarin8940
@victormarin8940 4 года назад
El símbolo del min 20:10 se llama Virgulilla y se escribe con alt+126 en el teclado Español
@santosahernandezmendoza7147
@santosahernandezmendoza7147 4 года назад
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
@VisualAvalon 4 года назад
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
@davesadventures6 2 года назад
@@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
@marcosrafaelrodriguezherna3897
amigo explicas muy bien pero tengo un problema para ajustar las imagenes :c
@gloriosapresencialive8497
@gloriosapresencialive8497 2 года назад
excelente vídeo, revisa los links de descarga y apoyo, al parecer no funcionan ....
@TZAR_NSG
@TZAR_NSG 4 года назад
Se nota cuando alguien realmente domina un tema, gracias.
@NeekaRostran
@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!!
@camiloarango7806
@camiloarango7806 2 года назад
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
@diegod4553
@diegod4553 4 года назад
Meu amigo, só tenho uma coisa a dizer: OBRIGADA!!! Eu procurei slides responsivo em vários canais brasileiros e americanos, mas você foi o único que executou uma aula perfeita! Excelente, brilhante. Um beijo no seu coração! Saudações de uma garota do Brasil!!! 😍
@ACaro-ux2ts
@ACaro-ux2ts 10 месяцев назад
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.
@leosalomon
@leosalomon 4 месяца назад
Hola que tal muy lindo el carrucel pero consulta la paginaciopn de izquierda y derecha es decir los botones , como se agregan!!
@Blue04516
@Blue04516 4 года назад
Excelente tutorial, me encantó tu manera de explicar
@EsoShitlin
@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?
@Hu6uinho
@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
@berticalle8816
@berticalle8816 3 года назад
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 ?
@alexissm6760
@alexissm6760 2 года назад
Proyecto caído. ¿no hay forma de que compartas de nuevo el código?
@inversoresmc755
@inversoresmc755 Год назад
Que bien eso está fabuloso. Y saludo a todos desde República Dominicana
@camlainez
@camlainez Год назад
Hola, ya no sale el link, tendrás de casualidad una forma alterna de descargar el código?
@carlosgomezatena4575
@carlosgomezatena4575 Год назад
hola buenas estoy iniciando en el tema de html y css y tengo el problema que no me toma los estilos css
@UnknwnCO
@UnknwnCO 5 лет назад
Wow me gusta mucho la nueva intro, al fin un Slider que se puede hacer responsive sin falls
@joelventura76
@joelventura76 5 лет назад
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-VFpVR-JpDX4.html
@Zamarian
@Zamarian 2 года назад
el link del projecto está roto
@styleceylys7351
@styleceylys7351 Год назад
ya no funciona la url😒😒😒😒
@moigami2
@moigami2 5 лет назад
Sou seu Fã. Bom dia...
@rubiii_
@rubiii_ 4 года назад
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?
@devikcode6308
@devikcode6308 2 года назад
los links no funcionan
@yaircarvajal3855
@yaircarvajal3855 3 года назад
Excelente aporte ! .. tuve un detalle con el tamaño pero ya lo fui ajustando ..
@marlonorozco2247
@marlonorozco2247 2 года назад
link caido
@brucorpparatodos5997
@brucorpparatodos5997 2 года назад
como lo haces más grande?
@brucorpparatodos5997
@brucorpparatodos5997 2 года назад
que ocupe toda la pantalla
@fcode9570
@fcode9570 5 лет назад
:O Está muy profesional
@joelventura76
@joelventura76 5 лет назад
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-VFpVR-JpDX4.html
@felipecalderon652
@felipecalderon652 4 года назад
Excelente muchas gracias! saludos de México!
@leandroacuna5159
@leandroacuna5159 3 года назад
animeishon
@Champi910
@Champi910 4 года назад
Hola, cómo se llama el tema o extensión de Brackets para hacer ese efecto de explosión al momento de escribir?
@VisualAvalon
@VisualAvalon 4 года назад
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!
@leandroacuna5159
@leandroacuna5159 3 года назад
itinereishon
@vidainformatico-as
@vidainformatico-as 5 лет назад
buenazo
@jeycolon
@jeycolon 2 года назад
Excelente contenido brother, saludos y espero que estés muy pero muy bien, saludos desde Colombia
@lacasadellavado3243
@lacasadellavado3243 3 года назад
Excelente tutorial!!!
@JSOLEDIA
@JSOLEDIA 4 года назад
Genial la explicación y tu código. Me pregunto si en lugar de imagens se puede hacer con textos?
@anakarina74
@anakarina74 4 года назад
tengo entendido q si en lugar de la etiqueta, "" colocas una "" o una lo q corre es el texto en vez de una imagen
@nicocorzi
@nicocorzi 2 года назад
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.
@diegomedflo
@diegomedflo 4 года назад
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
@ImWolfJulio 4 года назад
con transition-duration o animation-duration depende.
@cevallos7
@cevallos7 4 года назад
me pasa lo mismo, encontro como hacer que las imagenes dure mas?
@UrraSergio
@UrraSergio 2 года назад
Hola, ¿alguien tiene el código? Lo hice hace un tiempo y ahora no lo encuentro. GRACIAS de antemano :)
@FranciscoCastilleja_555
@FranciscoCastilleja_555 5 лет назад
una pregunta, cuando tecleas el efecto que sale es editado o hay un efecto para que al teclear se vea?
@VisualAvalon
@VisualAvalon 5 лет назад
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
@FranciscoCastilleja_555 5 лет назад
@@VisualAvalon GRACIAS CAMPEON
@choliski1617
@choliski1617 5 лет назад
@@VisualAvalon Hola magtimus, solo lo instalo o hay alguna forma de activarlo
@VisualAvalon
@VisualAvalon 5 лет назад
@@choliski1617 Hola! para activarlo debes hacer la siguiente combinación de teclas, que son: [Ctrl] + [Alt] + [0](Cero). Saludos, Éxito!
@choliski1617
@choliski1617 5 лет назад
@@VisualAvalon Muchas gracias, saludos
@nelocampos5645
@nelocampos5645 4 года назад
que pasa si quiero agregar mas fotos...GRACIAS
@daniel-24gra79
@daniel-24gra79 2 года назад
crack maquina, number one, mastodonte sos un duro man muchisimas gracias
@cubitodetetris7932
@cubitodetetris7932 Год назад
increible video, gracias, ya solo tengo el problema de que al darle click no se detiene
@Lidor-gu6jf
@Lidor-gu6jf 4 года назад
Funciona, pero pasa sobre mi NAV :c ayuda!! Que le debo cambiar?
@cristianyahirperezvides2799
@cristianyahirperezvides2799 4 года назад
hey eres el mejor me sirvió gracias pero no esta bien escrito el código de la descripción
@victorbrave466
@victorbrave466 Год назад
Bueno, simple y adaptable a cualquier proyecto!
@xXkeissiusXx
@xXkeissiusXx 2 года назад
Ya no esta disponible el código del proyecto :(
@juanjoseflorestorres5465
@juanjoseflorestorres5465 4 года назад
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.
@rodymichel
@rodymichel 3 года назад
hola saludos desde argentina gracias por el aporte excelente video.
@bastianframe6442
@bastianframe6442 2 года назад
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.
@mto8a
@mto8a 4 года назад
Te pinches amo, justo lo que buscaba para mi sitio estático. Suscrito 🤝
@normasoto4411
@normasoto4411 3 года назад
muchas gracias!!! me aclaraste muchas dudas!!! eres un sol!!!!!
@melanyperez3421
@melanyperez3421 4 года назад
Excelente! Recién lo termine! Muchísimas gracias por tu aporte. Super claro
@VisualAvalon
@VisualAvalon 4 года назад
Muchísimas por tu comentario me es muy motivador. Me alegro mucho poderte haber ayudado. Saludos!
@melanyperez3421
@melanyperez3421 4 года назад
Gracias a vos, me reía con la parte de 5px no mejor 4px, no 5px jajajaja
@VisualAvalon
@VisualAvalon 4 года назад
Jajajajajajajaja si es que antes yo hacía los proyectos en vivo, improvisados.
@NikoSkuall
@NikoSkuall 3 года назад
estan caidos los link :( alguien lo tiene gracias
@yasserespinoza1315
@yasserespinoza1315 4 года назад
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
@AndresParra-vw1zz
@AndresParra-vw1zz 5 лет назад
muy bonito eres un genio
@joelventura76
@joelventura76 5 лет назад
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-VFpVR-JpDX4.html
@sebastianaminfarina1515
@sebastianaminfarina1515 3 года назад
No me carga la 4 imaganes si coloco
@daniloriveroperez1630
@daniloriveroperez1630 2 года назад
de que tamaño son las iamgenes?
@dkdoblajes4748
@dkdoblajes4748 4 года назад
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
@rafaelpena9915 4 года назад
Hola patricia si es posible, descargate todos los archivos del Github luego elimina el estilo que se le asigna al body.
@levisunexpo
@levisunexpo 2 года назад
Gracias por el conocimiento aportado.
@MiikeEnCiel
@MiikeEnCiel 4 года назад
Excelente aporte. Muchas gracias.
@DavidRamirez-nk5sr
@DavidRamirez-nk5sr 4 года назад
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
@gabrielpmed3510 3 года назад
¿Ya intentaste la bulgar manera de ponerlo dentro de un divisor y dentro de este solamente centrarlo? Es burdo pero podría funcionar
@adrianwagner7106
@adrianwagner7106 4 года назад
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
@anakarina74 4 года назад
tengo entendido q si se puede, colocando las etiquetas o y dentro un
@a_youtube_random456
@a_youtube_random456 4 года назад
que tal MagtimusPro una consulta, en el caso de ser mas imagenes cual seria el ejemplo?.. muchas gracias
@gabrielpmed3510
@gabrielpmed3510 3 года назад
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)
Далее
ПОЮ ВЖИВУЮ🎙
3:19:12
Просмотров 875 тыс.
Новый вид животных Supertype
00:59
Просмотров 176 тыс.
Bearwolf - GODZILLA Пародия Beatrise
00:33
Просмотров 78 тыс.
pumpkins #shorts
00:39
Просмотров 10 млн
Please stop using px for font-size.
15:18
Просмотров 169 тыс.
Laravel vs Rails for Javascript developers
19:50
Просмотров 2,5 тыс.
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Просмотров 342 тыс.
Award Winning Animation With Only 20 Lines Of CSS?
6:59
Postgres just got even faster
26:42
Просмотров 30 тыс.
Banner Animado con Puro Css
10:04
Просмотров 17 тыс.
ПОЮ ВЖИВУЮ🎙
3:19:12
Просмотров 875 тыс.