Jssor è una libreria javascript per realizzare slideshow, gallerie fotografiche e banner adatte a qualsiasi dispositivo, anche mobile.

Jssor slideshow è rilasciato con licenza MIT ed è possibile utilizzarlo anche come plugin di jQuery.

Jssor slideshow: la slideshow realizzata con Jssor

Jssor slideshow: la slideshow realizzata con Jssor

Per utilizzare Jssor insieme a jQuery consultare l’articolo jQuery Jssor: slideshow mobile.

Jssor slideshow base

La slideshow è definita con il codice di marcatura mostrato dal seguente esempio. Modificare le proprietà width ed height dei due contenitori esterni per adattarli alle proprie immagini.

<div id="container1" style="position: relative; top: 0px; left: 0px; width: 400px; height: 300px;">
  <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 400px; height: 300px;">
    <div><img u="image" src="images/1.png" /></div>
    <div><img u="image" src="images/2.png" /></div>
    <div><img u="image" src="images/3.png" /></div>
    <div><img u="image" src="images/4.png" /></div>
    <div><img u="image" src="images/5.png" /></div>
  </div>
  <script>
   jssor_slider1_starter('container1');
  </script>
</div>

Inserire nell’elemento head del documento la libreria (jssor.slider.min.js) e, in uno script successivo, la funzione che attiva la slideshow.

<script src="js/jssor.slider.min.js"></script>
<script>
  jssor_slider1_starter = function (containerId) {
  var options = { $AutoPlay: true };
  var jssor_slider1 = new $JssorSlider$(containerId, options);
};
</script>

Aggiungere i controlli per lo spostamento

Per prima cosa aggiungere il codice html necessario per visualizzare i controlli di spostamento come mostrato di seguito.

<!-- SlideShow -->
<div id="container1" style="position: relative; top: 0px; left: 0px; width: 400px; height: 300px;">
  <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 400px; height: 300px;">
  <div><img u="image" src="images/1.png" /></div>
  <div><img u="image" src="images/2.png" /></div>
  <div><img u="image" src="images/3.png" /></div>
  <div><img u="image" src="images/4.png" /></div>
  <div><img u="image" src="images/5.png" /></div>
 <!-- Controlli -->
  <span u="arrowleft" class="jssora01l" style="top: 123px; left: 8px;"></span>
 <span u="arrowright" class="jssora01r" style="top: 123px; right: 8px;"></span>
</div>
 <!-- Trigger -->
<script>
  jssor_slider1_starter('container1');
</script>
</div>

Modificare il proprio foglio di stile css aggiungendo gli stili che impostano l’aspetto dei controlli di navigazione.

.jssora01l, .jssora01r {
  display: block;
  position: absolute;
  width: 45px;
  height: 45px;
  cursor: pointer;
  background: url(images/a01.png) no-repeat;
  overflow: hidden;
}
.jssora01l {background-position: -8px -38px;}
.jssora01r {background-position: -68px -38px;}
.jssora01l:hover {background-position: -128px -38px;}
.jssora01r:hover {background-position: -188px -38px;}
.jssora01l.jssora01ldn {background-position: -8px -38px;}
.jssora01r.jssora01rdn {background-position: -68px -38px;}

La classe .jssora01l indica l’immagine da utilizzare come controllo. Nell’esempio si è utilizzata una delle immagini predefinite che si trovano nella cartella img del plugin.

Infine modificare lo script inserendo le opzioni per il controllo dei pulsanti di navigazione.

<script src="js/jssor.slider.min.js"></script>
<script>
  jssor_slider1_starter = function (containerId) {
  var options = {
     $AutoPlay: true ,
     $ArrowNavigatorOptions: {
        $Class: $JssorArrowNavigator$,
        $ChanceToShow: 2
  }};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
</script>

Dopo aver impostato le opzioni i controlli di navigazione saranno attivi.

Altre informazioni sono disponibili nel sito ufficiale dello script.