Slider sencillo con jQuery RWD
Siempre que he buscado códigos para meter un slider en las páginas web que voy creando u optimizando, me encuentro que los slider no se ajustan, que tienen muchos erroes w3c, muchos códigos no funcionan bien etc etc.
Pues hoy lo que toca es ver cómo ajustar el CSS para que el slider sea adaptable (RWD) y por otra parte, cómo tendría que ser el JavaScript para que sobre las imágenes aparezcan unas flechitas que nos permitan avanzar o retroceder adicionalmente de forma manual.
Y ya que estaba modificando el JS, he aprovechado para depurarlo un poco y que pudiéramos eliminar del HTML las cajas (div) innecesarias, con esto corregiremos además los errores w3c.
Debido a que ya son muchas las modificaciones hechas sobre el original, en esta ocasión partiremos otra vez de cero y lo que viene a continuación incluye todo el código necesario. Sólo tendréis que copiar y pegar en un gadget (tipo HTML/JavaScript) y luego ya ajustáis el CSS con los colores que creáis conveniente.
Puedes ver en este enlace
para ver el código click derecho ver código fuente.
Sólo tenéis que cambiar URL_ENLACEx, URL_IMAGENx y TEXTOx enla parte HTML por vuestros propios datos y listo.
Si se quieren poner diapositivas adiciones sólo hay que añadir nuevos enlaces con la misma estructura: a + img + p
Esta última la ponemos ahora como función (changeDiv) para poder reutilizarla después.
Además se han añadido dos eventos onclick para cuando se pulsan los enlaces con las clases mas y menos, de manera que con ellos se cambian de orden también los enlaces y se resetea el tiempo del intervalo para que no se solape la función automática con la manual. Por último, el clic en el menos realiza un reordenamiento inverso para poder ir a la diapositiva anterior en lugar de a la siguiente usando prependTo.
Recuerdar en este punto que para que funcione necesitáis jQuery en vuestra plantilla. Con esa librería todo lo anterior generaría un cacharrito.
Probad las flechas para comprobar cómo se puede retroceder y avanzar manualmente y redimensionar la ventana para ver cómo el slider se adapta al ancho disponible.
¿Te ha gustado este Slide? ¿Fácil verdad?
Puedes ayudarme ahora a mi, compartiendo este artículo en tus redes sociales, de verdad que me encanta que me ayuden 🙂 😛
¡Hasta la próxima!
No SPAM lo prometo!
@FlavioGarciaSeo
Latest posts by @FlavioGarciaSeo (see all)
- pagina-web-gratis-asociaciones-beneficas - 29 octubre, 2023
- Empresas en remoto. Ofertas de internet, conexión en casa y mas herramientas. - 1 febrero, 2023
- La elección de compañías de Internet es fundamental para tu negocio - 4 noviembre, 2022
