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);
