Slider (carrusel) con JavaScript Vanilla, CSS y HTML

gfranco95 Seguir

Gamma
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
4 Mar 2016
Mensajes
398
1732426521731.png



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
 

gfranco95

Gamma
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
4 Mar 2016
Mensajes
398
cualquier pregunta sobre como modificar algunas cosas de su funcionamiento estoy a la orden!
 

OscarAlderete

Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
8 Oct 2022
Mensajes
103
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!
 
Arriba