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:
Modernizr.load({
test:Modernizr.inputtypes.range,
nope:['fd-slider.js','fd-slider.css']
});
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:
fdSlider.onDomReady();
Así que insertaremos dicho código dentro del polyfill.
Modernizr.load({
test:Modernizr.inputtypes.range,
nope:['fd-slider.js','fd-slider.css'],
complete:function(){if(fdSlider)fdSlider.onDomReady();}
});
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
