SLIDER RESPONSIVE with pure CSS | for your web page || MagtimusPro
ฝัง
- เผยแพร่เมื่อ 5 ต.ค. 2024
- 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
TH-cam: goo.gl/fMD3XB
Pinterest: goo.gl/dpHekf
![The Wall Song ร้องข้ามกำแพง | EP.213 | กรีน อัษฎาพร | 3 ต.ค. 67 [1/5]](http://i.ytimg.com/vi/3KrlLbCsadI/mqdefault.jpg)
![💙 Cómo hacer un slider en HTML y CSS [Código para copiar]](/img/n.gif)
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.
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!!! 😍
Me caga usar javascript, te mereces un like por el tutorial.
Que bien eso está fabuloso.
Y saludo a todos desde República Dominicana
El símbolo del min 20:10 se llama Virgulilla y se escribe con alt+126 en el teclado Español
Excelente tutorial... Que expliquen así nuestros educadores
Excelente aporte ! .. tuve un detalle con el tamaño pero ya lo fui ajustando ..
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! 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.
Bueno, simple y adaptable a cualquier proyecto!
Wow me gusta mucho la nueva intro, al fin un Slider que se puede hacer responsive sin falls
th-cam.com/video/VFpVR-JpDX4/w-d-xo.html
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
Excelente muchas gracias! saludos de México!
hola saludos desde argentina gracias por el aporte excelente video.
Hola que tal muy lindo el carrucel pero consulta la paginaciopn de izquierda y derecha es decir los botones , como se agregan!!
Excelente tutorial, me encantó tu manera de explicar
Muy bueno, muchas gracias , muy buena tu forma de explicar...
gracias por compartir tus conocimientos.
Te pinches amo, justo lo que buscaba para mi sitio estático. Suscrito 🤝
amigo explicas muy bien pero tengo un problema para ajustar las imagenes :c
Excelente aporte.
Muchas gracias.
crack maquina, number one, mastodonte sos un duro man muchisimas gracias
muchas gracias!!! me aclaraste muchas dudas!!! eres un sol!!!!!
Excelente contenido brother, saludos y espero que estés muy pero muy bien, saludos desde Colombia
Muy bueno explicando, muchas gracias.
Gracias por el conocimiento aportado.
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 ?
Excelente video, muchas gracias
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 vídeo, revisa los links de descarga y apoyo, al parecer no funcionan ....
increible video, gracias, ya solo tengo el problema de que al darle click no se detiene
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?
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
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
Excelente, mil gracias por el tutorial
Está increíble tu tutorial, muchas gracias :)
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?
Excelente tutorial!!!
hola buenas estoy iniciando en el tema de html y css y tengo el problema que no me toma los estilos css
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
Hola, intenté hacerlo, pero los input no responden cuando le hago clic.
Sou seu Fã. Bom dia...
muchas gracias amigo
chicos alguno de ustedes tuvo problemas con el keyframe? a la hora de llamar el autoplay no lo agarra
Alguno sabe como se hace con mas imagenes? osea el calculo dentro del transform 3D es igual?
Como inserto ese carrusel en una pagina ya existente
El mejor tutorial!!
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
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
muy bonito eres un genio
th-cam.com/video/VFpVR-JpDX4/w-d-xo.html
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.
Disculpa le quiero poner un texto y no aparece sobre las imágenes sabrás porque ?
que pasa si quiero agregar mas fotos...GRACIAS
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.
y si fueran 4 imagenes ¿cómo sería el porcentaje en el keyframe?
:O Está muy profesional
th-cam.com/video/VFpVR-JpDX4/w-d-xo.html
de que tamaño son las iamgenes?
Hola, ya no sale el link, tendrás de casualidad una forma alterna de descargar el código?
como se le puede agregar para que sea automatico?
Buenardoo..
sos un DIOS
Funciona, pero pasa sobre mi NAV :c ayuda!! Que le debo cambiar?
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!
Proyecto caído. ¿no hay forma de que compartas de nuevo el código?
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?
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
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 🤗🤗🤗🤗🤗🤗
donde puedo conseguir el codigo? ya que la pagina que esta no sale nada
podrias explicar mas a detalle el uso de ~?
de antemano muchas gracias
yo creo que seria un: if else
Una pregunta lo pregunto ante el total desconocimiento. Este código lo puedo poner en blogger?
Se ha caído el link para descargar el proyecto
buenazo
Hola, ¿alguien tiene el código? Lo hice hace un tiempo y ahora no lo encuentro.
GRACIAS de antemano :)
hola amigo, me podrias apoyar con el codigo por favor. el link no funciona.
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
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.
Ya no esta disponible el código del proyecto :(
No me carga la 4 imaganes si coloco
hey eres el mejor me sirvió gracias pero no esta bien escrito el código de la descripció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
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
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
Link del proyecto caido
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)
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
estan caidos los link :( alguien lo tiene gracias
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
Queria aprender algo nuevo y solo es pedirlo para tenerlo😂😂😂
Jajajaja así si es buenoooo jajaja... saludos.
@@VisualAvalon 😂😂😂
los links no funcionan
Podría mejorarse cambiando de imágenes de Horizontal a Vertical con media queries? (Para llenar siempre la pantalla)
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
Como hago para que la imagen coja la pantalla completa ?
Cabmia el max.width a 100%, está en 1000px
como lo haces más grande?
que ocupe toda la pantalla
link caido
ya no funciona la url😒😒😒😒
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!!
codigo'