domenica 27 Settembre 2020

Download in corso

Softwareone.it

05-01-2019

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

Demo

Scarica Ninja Slider

Visita il sito ufficiale Ninja slider

I commenti sono chiusi.

Pubblicità