feed twitter facebook LinkedIn facebook

jQuery » Crear un slider con jQuery

febrero 19, 2012 por Víctor Cuervo 5 Comentarios Imprimir Imprimir

Ahora que hemos publicado un artículo sobre cómo montar un slider en HTML5 muchas de las preguntas que nos están llegando son relativas al no soporte del slider HTML5 en ciertos navegadores y consultas sobre cómo montar una alternativa.

Lo que vamos a ver en este artículo es como crear un slider con jQuery. Y no es que jQuery nos de un slider como elemento base de su lenguaje, si no que vamos a utilizar un plugin de jQuery para poder crear un slider.

En concreto utilizamos el plugin fd-slider. Además vamos a utilizar la técnica de polyfills que vimos el otro día con el ejemplo sobre un placeholder.

Lo bueno del plugin fd-slider es que al ser un polyfill nos permite construir nuestra página con HTML5 y solo se ejecutará en aquellos navegadores que lo necesiten y durante el tiempo que lo necesiten.

Lo primero que tenemos que saber del plugin es que lo componen dos ficheros:

fd-slider.js
fd-slider.css

Utilizando el loader de Modernizr veremos que quedaría de la siguiente forma:

  1. Modernizr.load({
  2. test:Modernizr.inputtypes.range,
  3. nope:['fd-slider.js','fd-slider.css']
  4. });

Vemos que la capacidad que validamos del HTML5 es Modernizr.inputtypes.range.

Una vez cargados los ficheros del plugin fd-slider tenemos que lanzar el siguiente código para inicializar el plugin:

  1. fdSlider.onDomReady();

Así que insertaremos dicho código dentro del polyfill.

  1. Modernizr.load({
  2. test:Modernizr.inputtypes.range,
  3. nope:['fd-slider.js','fd-slider.css'],
  4. complete:function(){if(fdSlider)fdSlider.onDomReady();}
  5. });

Ya tendremos cargado nuestro slider con jQueryfuncionando en la página.

Os podéis descargar el plugin fd-slider desde https://github.com/freqdec/fd-slider

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre jQuery
Foro sobre jQuery
tags: , , , ,

Artículos relacionados:

5 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Bitacoras.com
    febrero 19, 2012 #

    Información Bitacoras.com…

    Valora en Bitacoras.com: Ahora que hemos publicado un artículo sobre cómo montar un slider en HTML5 muchas de las preguntas que nos están llegando son relativas al no soporte del slider HTML5 en ciertos navegadores y consultas sobre cómo montar u……

  2. mimicaweb
    febrero 21, 2012 #

    Excelente el artículo tutorial, muy bien explicado y muy util. Lo probaré.

  3. Víctor Cuervo
    febrero 21, 2012 #

    @mimicaweb,

    Me alegro que te haya gustado. Esperamos seguir escribiendo artículos como este.

  4. Galax
    abril 10, 2012 #

    Facil y rapido , Gracias por tu publicación =)

  5. Víctor Cuervo
    abril 10, 2012 #

    Gracias @Galax. :-D

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*