Spanish (Español) translation by Carlos (you can also view the original English article)
En este artículo, vamos a explorar cómo puedes configurar un slider básico utilizando la biblioteca jQuery. Usaremos la biblioteca bxSlider, que está creada sobre jQuery y que ofrece muchas opciones de configuración para estructurar uno.
En la actualidad, un slider o deslizador de imágenes es un elemento imprescindible, ¡una imagen vale más que mil palabras!
Una vez que has decidido que vas a estructurar un slider básico, la siguiente pregunta es cuál es exactamente el proceso para crearlo. Por supuesto, el primer requisito es reunir imágenes de buena calidad y de alta resolución.
Luego, tienes claro que vas a utilizar HTML y algo de JavaScript para crear tu slider de imágenes. Y existen muchas bibliotecas disponibles en la web que te permiten crearlo de distintas formas. Utilizaremos la biblioteca de código abierto bxSlider.
La biblioteca bxSlider cuenta con capacidad responsiva y, por lo tanto, el slider que sea creado usando esta biblioteca se adaptará a cualquier dispositivo. Estoy seguro de que sabes lo fundamental que es actualmente crear un sitio web responsivo y que se adapte a diferentes dispositivos. Por consiguiente, la capacidad responsiva es una característica imprescindible al elegir una biblioteca de terceros para crear tus sliders.
En la siguiente sección, exploraremos los fundamentos de la biblioteca bxSlider y el proceso de configuración. Más adelante, crearemos un ejemplo real que demostrará el uso de la biblioteca bxSlider. Y por último, veremos algunos parámetros importantes que admite la biblioteca bxSlider y que te permiten personalizar un slider de acuerdo a tus necesidades.
¿Qué es bxSlider?
Si estás buscando sliders para contenido basados en jQuery, bxSlider es una de las mejores y más sencillas bibliotecas y te permite crear sliders para contenido e imágenes muy fácilmente.
Echemos un vistazo rápido a las características que ofrece:
- Es totalmente responsivo y adaptable a todo tipo de dispositivos.
- Soporta distintos modos de visualización como horizontal, vertical y desvanecimiento. Veremos más sobre esto más adelante en el artículo.
- El contenido de la diapositiva puede ser cualquier cosa: imagen, video o texto en HTML.
- Es compatible con todos los navegadores populares.
- Ofrece una variedad de opciones de configuración que te permiten personalizar un slider de acuerdo a tus requisitos específicos.
- Finalmente, aunque no por ello menos importante, es fácil de implementar como veremos en la siguiente sección.
Ahora, veamos el proceso de instalación de la biblioteca bxSlider. En este artículo, voy a usar las URL de CDN para cargar los archivos necesarios de JavaScript y CSS, pero, evidentemente, puedes descargar o clonar estos archivos desde el repositorio oficial de bxSlider en GitHub.
Incluye los archivos de JavaScript y CSS
Lo primero que debes hacer es incluir los archivos necesarios de JavaScript y CSS en tu archivo HTML como se muestra en el siguiente fragmento.
1 |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> |
2 |
<script "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
3 |
<script "text/javascript" src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> |
Puedes incluir el código anterior en la etiqueta <head> de tu documento HTML. Como puedes ver, he cargado los archivos necesarios de las URL del CDN. Si has descargado estos archivos para tu proyecto, necesitas proporcionar la ruta correcta de cada archivo.
Configura el contenido del slider
En esta sección, veremos cómo puedes configurar el contenido del slider en tu archivo HTML.
Veamos el siguiente fragmento.
1 |
<div class="slider"> |
2 |
<div>Slide One</div> |
3 |
<div>Slide Two</div> |
4 |
<div>Slide Three</div> |
5 |
</div>
|
En el ejemplo anterior, hemos configurado tres diapositivas que rotarán cuando inicialicemos el deslizador. Lo importante a destacar en el fragmento anterior es la clase CSS que se le proporciona al elemento <div>. Por el momento, hemos utilizado slider como nuestra clase CSS, así que usaremos este valor durante la configuración de bxSlider.
Evidentemente, podrías usar cualquier contenido, no solamente texto. Volveremos a esto en la próxima sección cuando veamos cómo crear un slider de imágenes completo. Por ahora, solamente tienes que anotar la clase CSS que le hemos proporcionado al elemento <div> principal.
Inicializa bxSlider
Hasta el momento, hemos incluido los archivos necesarios de la biblioteca y hemos configurado el contenido HTML para nuestro slider. Lo único que falta es inicializar bxSlider para convertir nuestro contenido HTML estático en un elegante slider giratorio.
Veamos el fragmento para inicializar nuestro slider.
1 |
<script> |
2 |
$(document).ready(function(){ |
3 |
$('.slider').bxSlider(); |
4 |
});
|
5 |
</script> |
Es código JavaScript, así que también puedes colocarlo en la etiqueta <head>. O puedes ponerlo justo encima de la etiqueta </body> en la parte inferior de tu archivo HTML, de tal manera que JavaScript se ejecute después de que el resto de tu página termine de cargarse. Si prefieres colocarlo en la etiqueta <head>, tienes que asegurarte de situarlo después de haber cargado los archivos necesarios de JavaScript y CSS.
Como puedes ver, hemos utilizado la clase slider de CSS para inicializar nuestro deslizador.
Y con estos tres simples pasos, ¡has creado un slider responsivo utilizando la biblioteca bxSlider basada en jQuery!
En la siguiente sección, ampliaremos lo que hemos abordado hasta el momento, e intentaremos crear un slider utilizando una variedad de opciones de configuración suministradas por la biblioteca bxSlider.
Crea un ejemplo real
En la sección previa, abordamos cómo configurar un slider básico utilizando la biblioteca bxSlider. En esta sección, veremos un ejemplo real que demuestra cómo podrías crear un slider giratorio de imágenes para tu sitio web.
Bajo la raíz de tu documento, crea un archivo HTML que incluya el siguiente fragmento.
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<body>
|
4 |
<head>
|
5 |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> |
6 |
<script "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
7 |
<script "text/javascript" src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> |
8 |
</head>
|
9 |
|
10 |
<div class="slider"> |
11 |
<div><img src="/path/to/image1.jpg" title="Title of image1"></div> |
12 |
<div><img src="/path/to/image2.jpg" title="Title of image2"></div> |
13 |
<div><img src="/path/to/image3.jpg" title="Title of image3"></div> |
14 |
</div>
|
15 |
|
16 |
<script>
|
17 |
$('.slider').bxSlider({ |
18 |
autoControls: true, |
19 |
auto: true, |
20 |
pager: true, |
21 |
slideWidth: 800, |
22 |
mode: 'fade', |
23 |
captions: true, |
24 |
speed: 1000 |
25 |
});
|
26 |
</script>
|
27 |
</body>
|
28 |
</html>
|
Y con esa configuración, tu presentación de diapositivas debería verse más o menos así.
El código del ejemplo anterior debería resultar familiar. Es muy similar a lo que ya hemos abordado. La única diferencia es que hemos inicializado nuestro slider con algunas opciones de configuración que admite la biblioteca bxSlider. Veamos de cerca ese fragmento.
1 |
$('.slider').bxSlider({ |
2 |
autoControls: true, |
3 |
auto: true, |
4 |
pager: true, |
5 |
slideWidth: 800, |
6 |
mode: 'fade', |
7 |
captions: true, |
8 |
speed: 1000 |
9 |
});
|
El parámetro autoControls
El parámetro autoControls añade controles que permiten a los usuarios iniciar y detener el pase de las diapositivas. De manera predeterminada, está establecido en false, y por lo tanto si deseas mostrar los controles, necesitas establecerlo a true de manera explícita.
El parámetro auto
El parámetro auto te permite iniciar la presentación de
diapositivas de forma automática al cargar la página. De forma
predeterminada, se establece en false.
El parámetro pager
El parámetro pager añade un localizador a la presentación de diapositivas.
El parámetro slideWidth
El parámetro slideWidth te permite ajustar el ancho de la
presentación de diapositivas. Si estás usando la opción horizontal para tu presentación, este parámetro es imprescindible.
El parámetro mode
El parámetro mode te permite ajustar el tipo de transición entre diapositivas. Tienes tres opciones para elegir: horizontal, vertical y fade. En el ejemplo anterior, hemos usado la opción fade, por tanto, verás un efecto de desvanecimiento al pasar de una diapositiva a otra.
El parámetro captions
El parámetro captions se utiliza si deseas mostrar un título en cada diapositiva. Los títulos se obtienen del atributo title del elemento de la imagen. Como puedes ver, le hemos proporcionado un atributo title a todas las imágenes de nuestro ejemplo.
El parámetro speed
El parámetro speed te permite configurar la duración de la transición de la diapositiva, y se ajusta en milisegundos. En nuestro ejemplo, la hemos establecido en 1000, por lo tanto, las diapositivas se rotarán cada segundo.
bxSlider tiene muchas otras opciones de configuración, y puedes consultarlas en la documentación oficial de opciones de bxSlider. Adelante, explora las distintas opciones disponibles en la biblioteca de bxSlider. También te ofrece muchas posibilidades de personalización con los métodos callback de JavaScript.
Conclusión
Hoy, hemos tratado cómo puedes configurar un slider básico utilizando la biblioteca jQuery. Para fines de demostración, escogimos la biblioteca bxSlider que está creada sobre la biblioteca jQuery. También creamos un ejemplo real utilizando una serie de opciones de configuración que ofrece la biblioteca bxSlider.
Si has trabajado con bibliotecas para sliders basadas en jQuery, ¡me encantaría saberlo! Puedes compartir tus ideas usando el feed de abajo.
By
