BxSlider è una bellissima libreria che consente di creare slider responsive, quindi navigabili anche da mobile. Il oroblema che affronterò in questo articolo è come creare vari slider di immagini all’interno della stessa pagina HTML.
Come funziona
Tirare su uno slider è molto semplice, è sufficiente un mix di una struttura HTML ed una chiamata jQuery alla funzione bxSlider().
<ul class="bxslider"> <li><img src="/path/to/img.jpg" title="Image" /></li> <li><img src="/path/to/img1.jpg" title="Image2" /></li> <li><img src="/path/to/img2.jpg" title="Image3" /></li> </ul>
$('.bxslider').bxSlider({
mode: 'fade',
captions: true
});
Le opzioni di BxSlider
Sono disponibili molte opzioni, che ci consentono di configurare il comportamento dello slider, come ad esempio la possibilità di creare dei controlli custom per la navigazione dello slider, piuttosto che la capacità di modificare il numero di immagini/componenti da visualizzare a blocchi, oppure ancora definire il comportamento da dispositivi mobili.
La documentazione è fatta molto bene e la libreria è gratuita.
La soluzione
Il problema con cui mi sono confrontato oggi e che seppur documentato è stato un bel grattacapo, è stato come attivare più di uno slider all’interno della stessa pagina mantenendo le funzionalità di base.
Ecco di seguito la soluzione
// SLIDER
// launch bxslider
$('.bxslider').each(function(i){
slider_array[i] = $(this).bxSlider({
controls:false,
minSlides: 2,
maxSlides: 8,
moveSlides: 2,
slideMargin: 0,
slideWidth: 574,
pager: false,
adaptiveHeight: true,
pagerCustom: '.bxslider-controls',
nextSelector: '.bt-next',
prevSelector: '.bt-prev',
prevText: '',
nextText: ''
// nextText: '<img src="<? bloginfo("stylesheet_directory") ?>/images/next.png" />',
// prevText: '<img src="<? bloginfo("stylesheet_directory") ?>/images/prev.png" />'
});
});
// bind controls on custom controls, and run functions on every slider
$('.bxslider-controls a').bind('click', function(e) {
e.preventDefault();
if($(this).hasClass('pull-left')) {
var obj = $(this).parent().parent().find('.bxslider');
var index = $('.bxslider').index(obj);
slider_array[index].goToPrevSlide();
} else if($(this).hasClass('pull-right')) {
var obj = $(this).parent().parent().find('.bxslider');
var index = $('.bxslider').index(obj);
slider_array[index].goToNextSlide();
}
});
Puoi testare il comportamento dello slider al seguente jsfiddle
Ringrazio VJS per la soluzine fornita 🙂