¡Slider sin JavaScript! Sólo HTML y CSS

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

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

50% 1

Te explico paso a paso cómo crear un slider sencillo pero bonito para tu página web o app móvil.
La programación web ha evolucionado un montón y por eso es vital que conozcas todas sus posibilidades para crear webs espectaculares.
En este tutorial usamos algunas de las más nuevas características de CSS para lograr un slider visualmente sencillo pero muy bonito.

Наука

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

26 апр 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@cislsky Год назад

buenisimo y uno aca bajando librerias etc 😂😂

@astrixwr5662 Год назад

Habia leido por ahi del scroll-snap Esta genial

@jaimemartin1932 Год назад

Siempre me pregunté como se haría para que el scroll quedara en un punto fijo. Ahora se que es con css y scroll-snap-type x mandatory. Qué facil. Muchas gracias!

@RankXer Год назад

Gracias Midudev, un buen efecto, voy a tener que repasar o investigar lo de aspect-radio y lo de scroll-snap-type. un abrazo, gracias

@carlosalvarado9658 Год назад

Genial midu, gracias por tanto contenido de calidad 🎉

@ByDiamondGod 5 месяцев назад

Esta buenisimo, pero no sirve para PC, solo celu! Igual sos un crack midu, like

@yorkleinermosqueramoreno9466 Год назад

Mucho crack, gracias por todo

@HoralesCafeles Год назад

Espectacular

@jeanmigueluzcateguigonzale4078 Год назад

Excelente muchas gracias

@alzialzimurth2969 Год назад

si funciona crack , gracias por ese propiedad.

@Top10-4YOU Год назад

Genial.

@ThraroHS 8 месяцев назад

gran contenido amigo!

@itziarzg7524 Год назад

gracias crack.

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

Que grande eres!!!

@user-mo3gm4no2y Год назад

Esto me hubiera servido hace 1 mes pero igual buen video xd

@yoanestradablanco1608 Год назад

Me gusto bueisimo para usar con react native

@sarmancoder6488 Год назад

increible

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

Que campeon

@hanssellcerda7060 Год назад

Excelente

@11winding Год назад

Eres un crack tio, ¿se le puede añadir musica? a todo el slader

@sinoriginalidadoficial Год назад

@@11winding a que te refieres? ¿que al pasar, suene un efecto de sonido?

@antfun8784 Год назад

trucaso mi pana :v ya estoy pa la nasa xDDD

@omicron899 8 месяцев назад

00:00

@fernandaii 2 месяца назад

Alguien sabe como hacer un modal para descripción de producto, para cada producto... Gracias

@robertopaoloramirezmunoz6926 Год назад

¡¡Buenísimo Midu!! Pregunta... buscando un mejor rendimiento para nuestra aplicación, ¿cuál sería la mejor opción: HTML y CSS o JS?

@midudev Год назад

HTML y CSS siempre

@delfinaluna2879 4 месяца назад

Lo use para ver desde el telefono pero el scroll es muy rapido, hay alguna forma de hacer que el scroll baje la velocidad?

@camilom6121 10 месяцев назад

Sirve para React native?

@ramam7787 5 месяцев назад

Y en formato web?

@sergiopamplona1676 8 месяцев назад

y si tienes varias fotos en un array?

@GabrielitoSoy 6 дней назад

Comparte el codigo, x fa.

@rogera.1167 7 месяцев назад

Es responsive?

@elnuevo7771 Год назад

.slider img { width: 100%; left: 0; position: sticky; object-fit: cover; border-radius: 5px; scroll-snap-align: center; }

@selenerincon523 8 месяцев назад

si me falla te mato!!

@DavidRamirez-sk2sn 7 месяцев назад

Pero eso solo agarra en celular no con la flecha del mause no me agarra :'( , aparte me sale una barra de desplazamiento 😢

@ricardoruiz8600 6 месяцев назад

no sirve para pc.

@faustinomera582 6 месяцев назад

¡Qué!

@jorgedelapuente4347 Год назад

A ver si alguien me puede ayudar porque no me funciona. Me aparecen las barras de scroll

@elGonzoiwnl Год назад

tengo el mismo problema he probado a implementar el normalize.css pero es igual y también note que las imágenes se sobreponen intentare arreglar eso. PD : para esconder el scroll usa en la clase .slider { overflow: hidden; } y si se tr sobreponen la imagenes dale un background y listo lo unico es que desde pc no puedes deslizar pero desde movil si

@_david.rangel 9 месяцев назад

Slider de Imágenes /* Estilos para el slider */ .slider { aspect-ratio: 10 / 16; width: 300px; position: relative; display: flex; overflow: scroll; scroll-snap-type: x mandatory; } .slider img { width: 100%; left: 0; position: sticky; object-fit: cover; border-radius: 5px; scroll-snap-align: center; } Slider de Imágenes

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

.slider{ aspect-ratio: 10/16; }