En esta ocasión les traigo un sencillo código para agregar a un sitio web, blog y/o e-commerce de un sencillo slider de imágenes automático, el slider reproduce cada cierto tiempo cada imagen a través de su URL agregada previamente a un array, para la reproducción continua, se hace uso del método setTimeout de Javascript que va aumentando en 1 una variable llamada “siguiente”, si el valor de la variable “siguiente” supera el index de elementos del array de imágenes, entonces regresa a 0.

El efecto de desplazamiento es proporcionado por los métodos css y animate de jQuery, es decir, de ida-retorno a la posición inicial.

El resto de código consiste en la inclusión de algunos estilos css para determinar la anchura y altura del slider y otras propiedades CSS necesarias para el funcionamiento correcto del slider, como puede ser la propiedad overflow: hidden; en el elemento #box-imagen, es decir el div que alberga en su interior la imagen, esto es para evitar que la imagen se salga del contorno del div.

Ejemplo:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *