BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Basic jQuery Slider responsive, liviano y configurable

12/DIC/2012 16.760 visitas Ver comentarios
Basic jQuery Slider responsive, liviano y configurable

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Siempre queremos poner un slider en nuestras webs y nos esforzamos en buscar el más cool (o guay en versión spanish), con miles de efectos, que abarque miles de formatos en su contenido y que sea adaptativo (responsive in english)... para luego, no hacer nuestras webs adaptativas, poner sólo imágenes y usar siempre el efecto FADE... verdad?

Pues bien, buscando algo bueno bonito y barato, dí con este slider, realmente muy simple pero excesivamente potente y fácil de configurar o personalizar. Está basado en jQuery, como no, y su CSS tiene 13 líneas! (acabo de dejar de alucinar)... pero vamos a verlo a fondo.

Responsive
El slider es responsive, es decir, se adaptará él solito al ancho de tu ventana del navegador, esto te ahorrará escribir medidas distintas en tus media queries y ahorrarás líneas de código.

Contenido
Permite todo, pero todo. El contenido va dentro de una lista desordenada, UL para que nos entendamos, y cada slide es un LI que puede contener una imagen, texto o lo que quieras incluir (en la demo que verás no hay nada que no sea imágenes pero yo he probado a poner texto plano y funciona a la perfección).

Captions
Si tu diapositiva contiene imágenes puede tomar el atributo title y convertirlo en caption (el título que ves abajo en todos los slides que andan por ahí).

Animaciones
Ahí viene lo bueno, pesa poco, por lo tanto no puede tener mil efectos. Sólo dispone de slide o fade. Es decir, o va para la izquierda o suavizado alpha. Resumiendo, el que usamos el 99% de los desarrolladores en el 99% de las webs que hacemos...

Peso
El .js diminuto pesa 7kb y el css, como dije, tiene 13 líneas así que tu web no engordará demasiado.

Opciones
Puede tener paginación, botón de anterior y siguiente, navegación con teclado, inicio aleatorio, puede ser con control automático o manual, adaptativo, configurar el caption... resumiendo, se configura todo!

Lo quieres... no?
Me parece una sabia decisión. Pásate por www.basic-slider.com y descárgalo.

Código 1 - CSS
/* Basic jQuery Slider essential styles */

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
Código 2 - HTML
<!-- Include the jQuery library (local or CDN) -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Include the plugin *after* the jQuery library -->
<script src="bjqs.min.js"></script>
<!-- Include the basic styles -->
<link type="text/css" rel="Stylesheet" href="bjqs.css" />
<script>
jQuery(document).ready(function($) {
$('#banner-fade').bjqs({
'height' : 320,
'width' : 620,
'responsive' : true
});
});
</script>
<div id="my-slideshow">
<ul class="bjqs">
<li><!-- Any content you like --></li>
<li><!-- Can go inside these slides--></li>
</ul>
</div>
Código 3 - JAVASCRIPT
// width and height need to be provided to enforce consistency
// if responsive is set to true, these values act as maximum dimensions
width : 700,
height : 300,

// animation values
animtype : 'fade', // accepts 'fade' or 'slide'
animduration : 450, // how fast the animation are
animspeed : 4000, // the delay between each slide
automatic : true, // automatic

// control and marker configuration
showcontrols : true, // show next and prev controls
centercontrols : true, // center controls verically
nexttext : 'Next', // Text for 'next' button (can use HTML)
prevtext : 'Prev', // Text for 'previous' button (can use HTML)
showmarkers : true, // Show individual slide markers
centermarkers : true, // Center markers horizontally

// interaction values
keyboardnav : true, // enable keyboard navigation
hoverpause : true, // pause the slider on hover

// presentational options
usecaptions : true, // show captions for images using the image title tag
randomstart : true, // start slider at random slide
responsive : true // enable responsive capabilities (beta)

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018