Plugin jQuery para crear un slider que se adapte al ancho de su contenedor

Necesito un slider que no tenga un ancho fijo, sino que se adapte a la anchura de su contenedor. En principio valdría para cualquier div, pero también se podría utilizar para el body, con lo cual, el slider se reproduciría en el fondo de la página y ocuparía todo el navegador.

Buscando por internet, encontré sliders para el fondo de la página, pero que no se podían utilizar en el fondo de un div. El que me pareció más impresionante es Supersized pero sólo vale para el fondo, o al menos eso fue lo que me pareció. Otros plugins como Nivo Slider utilizan las imágenes del slider como fondo, por lo que no se puede cambiar su tamaño.

Así que después de buscar un rato, pensé que lo más rápido era programar un plugin para que hiciera lo que quiero, que tampoco era tan complicado. Aquí tenéis cómo lo he conseguido….

Partimos de un HTML con un div contenedor, que contiene una etiqueta img para cada imagen. El plugin mostraría un slider de las imágenes pero adaptando su ancho al ancho del contenedor, fuera cual fuera éste último.

A continuación, el código del plugin jQuery.:

 

Para asignarle el comportamiento del plugin al contenedor de las imágenes:

 

 

Ahora sólo falta el css para ajustar los tamaños de las imágenes y la visualización:

 

 

Es una primera versión y quiero hacerlo más configurable, pero de momento, es lo que hay…

He añadido un código de ejmplo en Fiddle:

Comments

  • Ezequiel Bajo
    Responder

    Muy bueno!! estoy hace rato buscando esto, un ejemplo no tendrás?

    Abrazo

    • Pablo García

      Hola Ezequiel, acabo de publicar un ejemplo en JSFiddle, espero que te sirva de ayuda. Saludos 🙂

  • Irene
    Responder

    Hola Pablo.
    Llevo toda la mañana buscando cómo hacer un slider al 100% y he llegado a tu página. Eufórica por tener la solución, me he dispuesto a probarlo pero no me funciona 🙁 Algo se me debe estar pasando por alto, imagino, pero no consigo dar con la tecla.
    ¿Del ejemplo que pones al final, por ejemplo, hay que cambiar algo o hay que copiar tal cual?
    Muchas gracias
    =)

Clic para cancelar respuesta.