Ninja Slider Responsive Slideshow
Ninja Slider è uno slider di Immagine Responsive, tattile e mobile-friendly, oltre ad includere diverse funzioni come, playVideo (indexOrLi), può essere utilizzato per controllare a livello di programmazione la riproduzione video / audio.
Può essere utilizzato come modello di presentazione per le pagine Web, quindi ogni elemento <li> nel markup del cursore Ninja verrà trattato come una diapositiva.
Supporta video / audio YouTube, Vimeo e HTML .
Possiamo usare immagini a bassa risoluzione di piccole dimensioni per il dispositivo di scorrimento; e configurarlo per utilizzare immagini ad alta risoluzione di grandi dimensioni quando il dispositivo di scorrimento viene ingrandito in modalità a schermo intero.
Funziona con tutti i principali browser desktop e mobili.
Il tipo di transizione su “diapositiva verticale” è facoltativo puoi impostarlo su qualsiasi altro tipo come “dissolvenza”, “slide”, “zoom”, … ecc.
Il markup è molto semplice:
<!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="ninja-slider.css" rel="stylesheet" /> <script src="ninja-slider.js" type="text/javascript"></script> </head> <body> <div id="ninja-slider"> <div class="inner"> <ul> <li><a class="ns-img" href="img/1.jpg"></a></li> <li><a class="ns-img" href="img/2.jpg"></a></li> <li><a href="/"><img class="ns-img" src="img/3.jpg"></a></li> </ul> </div> </div> </body> </html>
Viewport meta tag
Il layout reattivo.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
tutto viene gestito da javascript, modificare velocità di transizione,pause,avvio..
var nsOptions = { sliderId: "ninja-slider", transitionType: "slide", autoAdvance: true, rewind: true, delay: "default", //or integer value such as: 3500 transitionSpeed: "default", //eg. 500, 1200, or "default" aspectRatio: "9:6", initSliderByCallingInitFunc: false, shuffle: false, startSlideIndex: 0, //0-based navigateByTap: true, keyboardNav: true, before: null, (...rarely used options) license: "(your license key)" }; var nslider = new NinjaSlider(nsOptions);