Slider (carrusel) con JavaScript Vanilla, CSS y HTML

  • Autor Autor gfranco95
  • Fecha de inicio Fecha de inicio
gfranco95

gfranco95

Gamma
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
1732426521731.webp



He estado haciendo unas pruebas para un tutorial de como hacer un slider con HTML, CSS y sobre todo para darle la funcionalidad con Javascript puro, sin ningun framework, todo esto en forma de practica, aquí les dejo el codepen para que lo vean y si quieren usarlo pues sientanse libre.


LINK del código y funcionamiento en VIVO
 
cualquier pregunta sobre como modificar algunas cosas de su funcionamiento estoy a la orden!
 
Muy bien x tu contribución!

Pero = tengo ke ponerme ahora en plan pesado. Yo soy developer profesional -como se dice 1 seasoned- y trabajo + bien con datos, haciendo intranets, APIs, apps empresariales, ese tipo d implementaciones; así ke no suelo hacer mucho front end, pero desde hace años sé ke hay en el mercado 1 slider ke probablemente sea el mejor y + completo d todos:
https://swiperjs.com/

D hecho, hace poco rehice mi web personal (https://oscaralderete.com) y el slider ke se ve en la landing es 1 hecho con Swiper, el basado en custom web elements; pues aunke Swiper tiene versiones hechas especialmente para integrarlas con React o Vue para los demás sugiere el custom web elements. K específicamente para Angular implementarlo es 1 pain in the ass si no sabes lo suficiente. Swiper como podrán ver si visitan su web tiene efectos, lazy loading y montones d otros goodies. Cuando alguien me consulta y me dice: "Oscar, necesito 1 slider para mi website, le respondo siempre: Ponle Swiper".

Volviendo al tema, para efectos didácticos tu slider y tu esfuerzo son aplaudibles, pero ya hay mucho d eso en el mercado del e-learning. El otro día 1 d los practicantes me comentaba: "Oscar, hay 1 canal d youtube muy bueno con 1 profesor ke enseña bien...". Ví los 1ros 5 minutos y el fulano sólo decía generalidades, lo + ke repetía era 'suscríbete a mi canal'. Avanzamos el vídeo y creo ke recién a los 15 minutos comenzaba 'lo bueno', y lo bueno era ke el sujeto del vídeo abría la página del framework sobre lo ke trataba su vídeo, creo ke era RemixJS y literalmente los siguientes 45 minutos fueron seguir el "Getting started" d la página oficial. Sólo ke la típica "introducción al tema en 15 minutos" le tomó al tipo del vídeo 45 minutos y creo ke ni los terminó. Por eso insisto, a todos los ke kieran ser developers d verdad, aprendan inglés d lo contrario van a estar condenados a intentar aprender viendo a 1 cutre en youtube.

1 vez +, volviendo al tema, le podrías dar 1 vuelta a tu tut, si x ejemplo le creas 1 implementación para React o Vue o Angular (ke siempre se pone pesado con los types, algo ke confieso odiar profundamente -sé ke tiene sus ventajas si tu team es de 20 developers, pero no deja d ralentizar el proyecto si eres solo tú-). D ese modo tu target podrá aprender skills ke los típicos ke hacen tuts no hacen!!!!!!!!!!!!!!!!!

Dale, sigue haciendo cosas interesantes ke aporten a la comunidad!
 
Atrás
Arriba