Crear un slider con jQuery

19/feb/2012 jQuery , , 5 Comentarios
jquery

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

Vídeos sobre jQuery

Ningún video coincide

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

5 comentarios en “Crear un slider con jQuery”

Víctor Cuervo

Víctor Cuervo

Gracias @Galax. 😀

Víctor Cuervo

Galax

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

Víctor Cuervo

Víctor Cuervo

@mimicaweb,

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

Víctor Cuervo

mimicaweb

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

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*