Відео

no entendi al primer intento pero si al segundo, este es el unico que mr ayudo, grazie

supero facil de entender, gracias :9

Muy buena explicación, muchas gracias.😄😄

que belleza sencillo y fácil y sin usar javascript

bueno, gracias!

Brother mal tu contenido no, no das el código completo te saltas desde la linea 28 hasta la 41 donde vuelves a iniciar con el @keyframers.

Repo o código?

Buen video bro

a mi me sale la imagen hacia un costado, como la centro ?

gracias bro vi tu video y la pagina de imagenes y me ayudo mucho ya hice un slider como me gusta.gracias

Bro. Como lo hago en sentido contrario?

n o me sirvio me quedo re feo y eso que comprobe el codigo como 15 veces y esta igualito

Compartir code

Compartir code

Gracias sos mucho mejor que el bootstrap

👍👍🔔🔔✍✍

Gracias por el ejemplo bro: les dejo un ejemplo adaptado: html: <section class="us"> <div class="container_table"> <div class="left_section"> <h2>Historia</h2> <p> Granja Nakú se compromete al bienestar de las gallinas,<br> brindándoles instalaciones seguras y áreas de pastoreo<br> que promueven su libertad y reducen el estrés. </p> <button class="read_more">Leer más</button> </div> <div class="slider-frame"> <ul> <li><img src="/images/carousel_1.jpg" alt="1"></li> <li><img src="/images/carousel_2.jpg" alt="2"></li> <li><img src="/images/carousel_3.jpg" alt="3"></li> <li><img src="/images/carousel_4.jpg" alt="4"></li> <li><img src="/images/carousel_6.png" alt="5"></li> </ul> </div> </div> </section> Css: .us { position: relative; display: flex; flex-direction: column; justify-content: flex-start; /* Alinea el contenido al inicio (parte superior) */ align-items: center; min-height: auto; /* Asegura que la sección ocupe el 100% de la altura si es necesario */ width: 100%; background-color: #ffffff; padding: 0; /* Elimina cualquier relleno innecesario */ } .left_section { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; /* Alinea el contenido al inicio (izquierda) */ width: 60%; padding: 34px; text-align: start; /* Alinea el texto dentro del div al inicio */ margin-left: 14vh; /* Añade margen desde el lado izquierdo */ } .left_section h2 { color: #81D520; text-align: start; /* Alinea el título al inicio (izquierda) */ margin-bottom: 2.5vh; } .left_section p { color: #375A0E; text-align: start; /* Alinea el texto del párrafo al inicio (izquierda) */ margin-bottom: 3vh; } .left_section .read_more { background-color: #81D520; color: #ffffff; border: none; width: 100px; height: 50px; text-align: center; font-size: 16px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } .left_section .read_more:hover { background-color: #67bd05; } /* Contenedor principal que alinea la parte izquierda y el slider */ .container_table { display: flex; justify-content: space-between; align-items: center; width: 100%; /* Ancho completo del contenedor */ height: auto; } .left_section { flex: 1; /* Ocupa el 50% del ancho */ padding-right: 20px; } .right_section { flex: 1; /* Ocupa el 50% del ancho */ display: flex; justify-content: center; /* Centra la imagen horizontalmente */ } .container_table { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 50px; height: 90vh; /* Asegura que el contenido esté alineado verticalmente */ } /* Estilos del slider */ .slider-frame { flex: 1; /* Ocupa el 50% del ancho */ display: flex; justify-content: center; align-items: center; height: 90%; /* Asegura que el slider se alinee verticalmente */ overflow: hidden; width: 50%; /* Ajustar a la mitad del contenedor */ position: relative; /* Asegura que las imágenes estén dentro del contenedor */ margin-right: 6vh; border-radius: 5px; } .slider-frame ul { display: flex; padding: 0; margin: 0; width: 500%; /* No importa tanto, las imágenes se muestran una a la vez */ list-style-type: none; transition: transform 1s ease-in-out; /* Transición suave entre imágenes */ animation: slide 20s infinite ease-in-out; /* Aplicamos la animación */ } .slider-frame li { width: 100%; /* Cada imagen ocupa todo el ancho del contenedor */ flex-shrink: 0; /* Evita que se reduzca el tamaño del `li` */ } .slider-frame img { width: 100%; /* Ajusta la imagen al ancho completo del slider */ height: auto; border-radius: 15px; } /* Animación para mostrar una imagen a la vez */ @keyframes slide { 0% { transform: translateX(0%); } 20% { transform: translateX(0%); } 25% { transform: translateX(-100%); } 45% { transform: translateX(-100%); } 50% { transform: translateX(-200%); } 70% { transform: translateX(-200%); } 75% { transform: translateX(-300%); } 95% { transform: translateX(-300%); } 100% { transform: translateX(0%); } }

Hola esta mujy bueno lo qu explicas y las referencias, pero cual es la diferencia entre el 100% responsive y las mediaquery? cual de las dos formas conviene mas en aplicarlas?

Amigo utilicé el keyframe tal cual pusiste en Sass pero no se mueven mis imagenes

Todo genial pero quiero que a la vez las imágenes sean automáticas y se muevan solitas con esos puntitos abajo incluido 😭

Muchas gracias!!

tu slider no funciona y no respondes a lo que te preguntamos en el min 5:06

Gracias grande, te pasaste.

Hola, quería saber cómo puedo hacer que el slider vaya de forma vertical? Lo quería poner en los bordes de mí página

Buen dia CodeGlitch recien termine el programa te agradezco saludos pase buen dia

sos el MEJORRRRRRRR, me funciono un montonnn

gracias RECIEN ESTOY APRENDIENDO Y QUERIA AGREGAR UN SLIDER VI COMO 4 VIDEOS NINGUNO ME FUNCIONO Y ENSERIO GRACIAS LO LOBRE TE GANASTE UN SUSCRIPTOR

TE GANASTE UN SUSCRIPTOR GRACIAS POR DEJARNOS EL CÓDIGO 😄😄 🎉🎉🎉

solo me muestra en el slider una imagen ya lo volvi hacer y hace lo mismo

Hola, ¿es posible hacer un carrusel, automático y manual con únicamente html y css? ya que mi sitio no me permite utilizar scripts y no puedo usar javascript :( , buen video por cierto :D

Ayuda, aparecen las 4 imágenes al mismo tiempo, no se centran y desaparecen todas al mismo tiempo en la animación

<3

Muchas Gracias me sirvió demasiado.

bro en el minuto 5:08 se ve que hay líneas que no explicaste, te iba a dar like :/

Excelente video

Ufff maquina no te imaginas cuanto tiempo llevaba tratando de hacer eso, eres un duro!

las imagenws deben ser del mismo tamaño ?

Se puede poner un enlace en cada imagen?. lo bajé y lo personalicé, pero me interesa el punto de agregar un enlace. Gracias.

Me salvaste, excelente explicación y rápido, otros videos duran hasta 30 minutos, este me encantó❤

¿porque dejaste de subir videos bro?

no funciona bro, no corre la animación, que podrá ser?

thx me ayudaste a darle un detalle mas a mi proyecto

PD: Tokio es una ciudad jajaja 🥹

muchísimas gracias, eres muy amable y fue fácil entender

Hola!! En el minuto 5:06 hay un cort y no se ve el resto del codigo. Por favor, podrias pasar el codigo completo?

gracias

Como podría hacer que también funcione en responsive? O que se vea el efecto en celulares?

Oigan saben por qué las imagenes salen pegadas y no una por una?

GRACIAS MUY BUENO

Hola, te falto algo del codigo, en el 5:06 pasas de la linea 28 a la linea 38.