Sliders jquery

Ayer, hablando con un amigo me comentaba que estaba iniciándose en el mundo de la programación web, y que estaba buscando algún carrusel de imágenes para añadir a una web. Como la mejor forma de verlo es con ejemplo aquí va este pequeño resumen con algunos ejemplos.

Un slider o carrusel es una aplicación que permite la rotación de imágenes, textos, vídeos, etc. Dicha rotación puede ser automática o dependiente de la interacción del usuario. Hoy en día son pocas las páginas que no usen carruseles en al menos una de sus secciones (normalmente en la página principal) para mostrar a modo de resumen imágenes relacionadas con la actividad de la web,  información resumida de lo que el visitante se encontrará en ella o simplemente un aporte estético que complemente al diseño de la web.

Existen innumerables plugins jquery para crear carruseles de contenido, cada uno con sus peculiaridades y posibilidades de adaptación, tipo de rotación, etc… pero yo los clasificaría en 3 grupos:

  • Sliders fijos: aquellos cuyo ancho y alto son fijos independientemente de la resolución de la pantalla o el dispositivo en el que se visualicen. Son los mas comunes y se usan en páginas de ancho fijo, ya que no necesitan adaptarse a diferentes tamaños. Ejemplo: slider en paukner-lpa.
  • Sliders  elásticos: o de ancho variable aquellos cuyo ancho se adapta al ancho del navegador. Son usados en webs que se adaptan (toda la web o parte del contenido de la misma) al tamaño de la pantalla, y las imágenes contenidas en ellos se redimensionan proporcionalmente a ese ancho. Se comienzan a usar mucho sobre todo en webs con diseños responsive. Ejemplo: slider en 2lunch.
  • Sliders background: aquellos que se adaptan a las dimensiones del navegador. Son usados para insertar imágenes de fondo en webs como complemento al resto de contenidos. Ejemplo: slider en aras impulso.

A continuación os indico algunos de los que yo mas suelo usar y luego un pequeño listado con mas enlaces de ejemplo para que podáis elegir.

Sudo slider

El que más uso, el que tiene mas funcionalidades, con este slider se tienen resueltas el 97% de las necesidades de visualización de imagenes+textos en formato carrusel en una web, el 3% restante incluirían las animaciones con efecto parallax/slices, etc., el ancho variable y los sliders background. Permite sliders anidados, thumbs en slider, pausa en mouseover, pestañas, añadir capas dinámicamente, etc.

Como usarlo (ejemplo básico):

  1.  Cargamos la librería jquery básica y la librería del plugin.
  2. Añadimos el siguiente código a la cabecera de la web:
    <script type=”text/javascript” >
    $(document).ready(function(){   var sudoSlider = $(“#slider”).sudoSlider();   });
    </script>
  3. Añadimos el siguiente código en la zona de la web en la que queramos que se muestre el carrusel:

    <div id=”slider” >
    <ul>
    <li><img src=”imagen01.jpg” alt=”descripcion”/></li>
    <li><img src=”imagen 02.jpg” alt=” descripcion”/></li>
    <li><img src=”imagen03.jpg” alt=” descripcion”/></li>
    <li><p>Texto en capa 4</p></li>
    <li><p>Texto texto en capa 5</p></li></ul></div>

Y listo, ya tenemos nuestro slider funcionando.

Mas información:  web de sudo slider + ejemplo anterior en funcionamiento + todos los ejemplos.

 

Elastic Image Slideshow

Este slider se ajusta automáticamente al ancho del navegador, permite añadir texto que se muestra con animaciones y tiene una gestión de thumbs personalizable.   Su uso es similar al del sudo.

Mas información: elastic image slideshow con ejemplo de uso + demo.

 

Vegas

Slider de background, que adapta dinámicamente las imágenes a la resolución del navegador.

En este caso el uso es diferente al de los dos anteriores, ya que no es necesario cargar las imágenes en html, se realiza todo desde la función jquery:

  1.  Cargamos la librería jquery básica y la librería del plugin.
  2. Añadimos el siguiente código a la cabecera o contenido de la web:<script>
    $( function() {
    $.vegas( 'slideshow', {
    delay: 8000,
    backgrounds: [
    { src: 'images/background4.jpg', fade: 4000 },
    { src: 'images/background3.jpg', fade: 4000 },
    { src: 'images/background2.jpg', fade: 4000 },
    { src: 'images/background1.jpg', fade: 4000 }
    ]
    } )( 'overlay' );
    </script>

Y ya está, ahora solo hay que maquetar la web teniendo en cuenta que el fondo sera la imagen o imágenes que añadamos en el jquery del slider.
Más información: jquery vegas + demo con thumbs.

 

Otros sliders interesantes:

  • CSS3 Responsive Slider: slider sin jquery, solo css:  web con demo.
  • Unslider: sin animaciones, solo transiciones entre capas: web con demo.
  • Background Slideshow: slider de background, con autoplay y controles de navegación y pausa: web + demo.
  • Rotating Image Slider: slider con efecto abanico: web + demo.
  • Simple Multi-Item Slider: slider de categorías de productos: web + demo.
  • Threesixty-slider: permite visualizaciones de imágenes en 360º: web.
  • StackSlider: slider con efecto cartas de una baraja: web + demo.
  • Slit Slider: diseño responsive con efecto de corte en las imagenes de fondo: web + demo 1 + demo 2.
  • FlexSlider 2: diseño responsive:  web.
  • Adaptor: slider 3D con diferentes animaciones: web.
  • Fluid css3 slider: con efecto parallax: web + demo.
  • Iview slider: demo + download.

Deja un comentario


*