Piccolo cursore 2 | Slider Javascript alla vaniglia per tutti gli scopi.

Blog

Piccolo cursore 2 | Slider Javascript alla vaniglia per tutti gli scopi.

Piccolo slider per tutti gli usi, ispirato a Owl Carousel.



visualizza l'app per i tweet protetti

demo

Risultati del test



Versione precedente : v1, v0

Avvertimento : tiny-slider funziona con contenuto statico e funziona solo nel browser. Se l'HTML viene caricato dinamicamente, assicurati di chiamare tns() dopo il suo caricamento.



Contenuti

Cosa c'è di nuovo

  • Utilizzo di % invece di px (non è più necessario ricalcolare la larghezza di ciascuna diapositiva al ridimensionamento della finestra)
  • Utilizzo di mediaquery CSS se supportato
  • Salva i valori delle funzionalità del browser in localStorage , in modo che non vengano ricontrollati fino a quando il browser non viene aggiornato o l'utente non cancella manualmente il localStorage.
  • Più opzioni disponibili per la risposta. (Inizia dalla v2.1.0, problema 53)
  • Inserisci controlli e navigazione prima cursore invece di dopo (problema 4)
  • Sposta il pulsante di riproduzione automatica fuori dal contenitore di navigazione. (Inizia dalla v2.1.0)
  • Alcune modifiche al selettore in tiny-slider.scss

Migrazione alla v2

  • Aggiorna i controlli e/o gli stili di navigazione in base ai loro cambiamenti di posizione.
  • Aggiorna i selettori di scorrimento di conseguenza se utilizzati nel tuo CSS o JS.
  • Aggiorna gli stili relativi al pulsante di riproduzione automatica.

in alto

Caratteristiche

Carosello *Galleria
Orizzontale *Verticale
Larghezza percentuale *Larghezza fissaLarghezza automatica
Ciclo continuo
Riavvolgi
Scorri per
Ragazzi
Imbottitura del bordo
Centro (v2.9.2+)
Reattivo
Lazyload
Riproduzione automatica
Altezza automatica
Tocca/trascina
Tasti freccia
Personalizza controlli/navigazione
Accessibilità
Rispondi ai cambiamenti di visibilità del DOM
Eventi personalizzati
Nidificato

* Predefinito

in alto

aol recupera email cancellate

Installare

bower installa tiny-slider o npm installa tiny-slider

utilizzo

1. Aggiungi CSS (e polyfill IE8 se necessario)

2. Aggiungi markup

li -->

3. Chiama tns()

Opzione A: aggiungi tiny-slider.js alla tua pagina:

Opzione B: importa tns tramite webpack o rollup:

// yourScript.js import { tns } from './node_modules/tiny-slider/src/tiny-slider'

Opzione C: l'importazione di tns inizia direttamente dalla v2.8.2

import {tns} from './src/tiny-slider.js'; var slider = tns({ container: '.my-slider', items: 3, slideBy: 'page', autoplay: true });

in alto

Opzioni

OpzioneTipoDescrizione
contenitoreNodo | CordaPredefinito: '.slider'.
L'elemento o il selettore del contenitore del dispositivo di scorrimento.
modalità'carosello' | 'galleria'Predefinito: 'carosello'.
Controlla il comportamento dell'animazione.
Con il carosello tutto scorre di lato, mentre la galleria utilizza le animazioni di dissolvenza e cambia tutte le diapositive contemporaneamente.
asse'orizzontale' | 'verticale'Predefinito: 'orizzontale'.
L'asse del cursore.
Oggettinumero positivoPredefinito: 1.
Numero di diapositive visualizzate nella finestra.
Se le diapositive sono inferiori o uguali agli elementi, il dispositivo di scorrimento non verrà inizializzato.
ragazziintero positivoPredefinito: 0.
Spazio tra le diapositive (in 'px').
edgePaddingintero positivoPredefinito: 0.
Spazio all'esterno (in 'px').
larghezza fissaintero positivo | falsoPredefinito: falso.
Controlla l'attributo di larghezza delle diapositive.
larghezza automaticabooleanoPredefinito: falso.
Se vero, la larghezza di ogni diapositiva sarà la sua larghezza naturale come una casella di blocco in linea.
viewportMax (era fixedWidthViewportWidth)intero positivo | falsoPredefinito: falso.
Larghezza massima della finestra per fixedWidth/autoWidth.
slideBynumero positivo | 'pagina'Predefinito: 1.
Numero di diapositive in corso su un 'clic'.
centro (v2.9.2+)booleanoPredefinito: falso.
Centrare la diapositiva attiva nella finestra.
controllibooleanoPredefinito: vero.
Controlla la visualizzazione e le funzionalità dei componenti di controllo (pulsanti precedente/successivo). Se true, visualizza i controlli e aggiungi tutte le funzionalità.
Per una migliore accessibilità, quando viene messo a fuoco un pulsante precedente/successivo, l'utente sarà in grado di controllare il dispositivo di scorrimento utilizzando i tasti freccia sinistra/destra.
controlliPosizione'in alto' | 'parte inferiore'Predefinito: 'in alto'.
Controlla la posizione dei controlli.
controlliTesto(Testo | Marcatura) ArrayPredefinito: ['precedente', 'successivo'].
Testo o markup nei pulsanti precedente/successivo.
controlliContenitoreNodo | Stringa | falsoPredefinito: falso.
L'elemento/selettore contenitore attorno ai pulsanti precedente/successivo.
ControlsContainer deve avere almeno 2 elementi figlio.
prevButtonNodo | Stringa | falsoPredefinito: falso.
Pulsanti precedenti personalizzati.
Questa opzione verrà ignorata se controlliContainer è un elemento Node o un selettore CSS.
pulsante successivoNodo | Stringa | falsoPredefinito: falso.
Pulsanti successivi personalizzati.
Questa opzione verrà ignorata se controlliContainer è un elemento Node o un selettore CSS.
non sonobooleanoPredefinito: vero.
Controlla la visualizzazione e le funzionalità dei componenti di navigazione (punti). Se true, visualizza il nav e aggiungi tutte le funzionalità.
navPosition'in alto' | 'parte inferiore'Predefinito: 'in alto'.
Controlla la posizione del navigatore.
contenitore di navigazioneNodo | Stringa | falsoPredefinito: falso.
L'elemento/selettore contenitore attorno ai punti.
navContainer deve avere almeno lo stesso numero di bambini delle diapositive.
navAsThumbnailsbooleanoPredefinito: falso.
Indica se i punti sono miniature. Se true, saranno sempre visibili anche quando più di 1 diapositive sono visualizzate nella finestra.
tasti frecciabooleanoPredefinito: falso.
Consente di utilizzare i tasti freccia per cambiare diapositiva.
velocitàintero positivoValore predefinito: 300.
Velocità dell'animazione della diapositiva (in 'ms').
riproduzione automaticabooleanoPredefinito: falso.
Attiva o disattiva il cambio automatico delle diapositive.
posizione di riproduzione automatica'in alto' | 'parte inferiore'Predefinito: 'in alto'.
Controlla la posizione di riproduzione automatica.
AutoplayTimeoutintero positivoPredefinito: 5000.
Il tempo tra 2 diapositive di riproduzione automatica cambia (in 'ms').
AutoplayDirection'avanti' | 'indietro'Predefinito: 'avanti'.
Direzione del movimento della diapositiva (salita/discesa dell'indice della diapositiva).
autoplayTextArray (testo | markup)Predefinito: ['start', 'stop'].
Testo o markup nel pulsante di avvio/arresto della riproduzione automatica.
autoplayHoverPausabooleanoPredefinito: falso.
Smette di scorrere al passaggio del mouse.
pulsante di riproduzione automaticaNodo | Stringa | falsoPredefinito: falso.
Il pulsante o selettore di avvio/arresto della riproduzione automatica personalizzato.
autoplayButtonOutputbooleanoPredefinito: vero.
Emetti il ​​markup autoplayButton quando la riproduzione automatica è true ma non viene fornito un autoplayButton personalizzato.
autoplayResetOnVisibilitybooleanoPredefinito: vero.
Sospende lo scorrimento quando la pagina è invisibile e lo riprende quando la pagina torna visibile. ( API per la visibilità della pagina )
animateInCordaPredefinito: 'tns-fadeIn'.
Nome della classe di animazione introduttiva.
animateOutCordaPredefinito: 'tns-fadeOut'.
Nome della classe di animazione finale.
animatoNormaleCordaPredefinito: 'tns-normal'.
Nome della classe di animazione predefinita.
animareDelayintero positivo | falsoPredefinito: falso.
Tempo tra ogni animazione della galleria (in 'ms').
ciclo continuobooleanoPredefinito: vero.
Si sposta in tutte le diapositive senza soluzione di continuità.
riavvolgerebooleanoPredefinito: falso.
Si sposta sul bordo opposto quando si raggiunge la prima o l'ultima diapositiva.
altezza automaticabooleanoPredefinito: falso.
L'altezza del contenitore del dispositivo di scorrimento cambia in base all'altezza di ciascuna diapositiva.
reattivoOggetto: {
punto di rottura: {
chiave: valore
}
} | falso
Predefinito: falso.
Punto di interruzione: intero.
Definisce le opzioni per le diverse larghezze della finestra (vedi Opzioni reattive ).
pigrobooleanoPredefinito: falso.
Consente il caricamento lento delle immagini che al momento non sono visualizzate, risparmiando così larghezza di banda (vedi demo ).
NOTA:
+ La classe .tns-lazy-img deve essere impostata su ogni immagine che si desidera caricare con lazy se l'opzione lazyloadSelector non è specificata;
+ è richiesto l'attributo data-src con il suo valore dell'immagine reale src;
+ l'attributo larghezza per ogni immagine è richiesto per lo slider autoWidth.
lazyloadSelector (v2.9.1+)CordaPredefinito: '.tns-lazy-img'.
Il selettore CSS per le immagini lazyload.
toccobooleanoPredefinito: vero.
Attiva il rilevamento dell'input per i dispositivi touch.
mouseTrascinabooleanoPredefinito: falso.
Modificare le diapositive trascinandole.
swipeAngleintero positivo | booleanoPredefinito: 15.
Lo scorrimento o il trascinamento non verranno attivati ​​se l'angolo non è compreso nell'intervallo quando impostato.
preventActionWhenRunning (v2.9.1+)booleanoPredefinito: falso.
Impedisci la transizione successiva mentre il cursore si sta trasformando.
preventScrollOnTouch (v2.9.1 +)'auto' | 'forza' | falsoPredefinito: falso.
Impedisci lo scorrimento della pagina su touchmove. Se impostato su 'auto', il dispositivo di scorrimento verificherà prima se la direzione del tocco corrisponde all'asse del dispositivo di scorrimento, quindi deciderà se impedire o meno lo scorrimento della pagina. Se impostato su 'forza', lo slider impedirà sempre lo scorrimento della pagina.
nidificato'interno' | 'esterno' | falsoPredefinito: falso.
Definisce la relazione tra gli slider annidati. (vedi dimostrazione)
Assicurati di eseguire prima il dispositivo di scorrimento interno, altrimenti l'altezza del contenitore del dispositivo di scorrimento interno sarà errata.
congelabilebooleanoPredefinito: vero.
Indica se il dispositivo di scorrimento verrà bloccato (controlli, navigazione, riproduzione automatica e altre funzioni smetteranno di funzionare) quando tutte le diapositive possono essere visualizzate in una pagina.
disattivarebooleanoPredefinito: falso.
Disabilita il dispositivo di scorrimento.
startIndexintero positivoPredefinito: 0.
L'indice iniziale del dispositivo di scorrimento.
onInitFunzione | falsoPredefinito: falso.
Richiamata da eseguire all'inizializzazione.
useLocalStoragebooleanoPredefinito: vero.
Salva le variabili di capacità del browser in localStorage e senza rilevarle ogni volta che il dispositivo di scorrimento viene eseguito se impostato su true.
nunzioStringa / falsoPredefinito: falso.
Attributo Nonce facoltativo per il tag di stile in linea per consentire l'utilizzo del dispositivo di scorrimento senza l'origine della politica di sicurezza del contenuto non sicura in linea.

NOTA: prima della v2.0.2, le opzioni 'container', 'controlsContainer', 'navContainer' e 'autoplayButton' devono ancora essere elementi DOM. Per esempio. contenitore: document.querySelector('.my-slider')

in alto

Opzioni reattive

Le seguenti opzioni possono essere ridefinite nel campo reattivo: startIndex, elementi, slideBy, velocità, autoHeight, fixedWidth, edgePadding, gutter, center, controlli, controlli testo, nav, autoplay, autoplayHoverPause, autoplayResetOnVisibility, autoplayText, autoplayTimeout, tocco, mouseDrag, arrowKeys, disattivare

var slider = tns({ container: '.my-slider', items: 1, responsive: { 640: { edgePadding: 20, gutter: 20, items: 2 }, 700: { gutter: 30 }, 900: { items: 3 } } });

NOTA:

  • I breakpoint si comportano come (min-width: breakpoint) nei CSS, quindi un'opzione non definita verrà ereditata dai precedenti piccoli breakpoint.
  • fixedWidth può essere modificato solo in altri numeri interi positivi. Non può essere modificato in un numero intero negativo, 0 o altro tipo di dati.

in alto

metodi

Lo slider restituisce un oggetto slider con alcune proprietà e metodi una volta inizializzato:

{ version: version, // tiny-slider version getInfo: info(), events: events, // Object goTo: goTo(), play: play(), pause: pause(), isOn: isOn, // Boolean updateSliderHeight: updateInnerWrapperHeight(), refresh: initSliderTransform(), destroy: destroy(), rebuild: rebuild() }

Per ottenere le informazioni sullo slider, puoi utilizzare il metodo getInfo() o iscriverti a un evento. Entrambi restituiscono un oggetto:

www.netflix.com/activate il mio dispositivo
{ container: container, // slider container slideItems: slideItems, // slides list navContainer: navContainer, // nav container navItems: navItems, // dots list controlsContainer: controlsContainer, // controls container hasControls: hasControls, // indicate if controls exist prevButton: prevButton, // previous button nextButton: nextButton, // next button items: items, // items on a page slideBy: slideBy // items slide by cloneCount: cloneCount, // cloned slide count slideCount: slideCount, // original slide count slideCountNew: slideCountNew, // total slide count after initialization index: index, // current index indexCached: indexCached, // previous index displayIndex: getCurrentSlide(), // display index starts from 1 navCurrent: navCurrent, // current dot index navCurrentCached: navCurrentCached, // previous dot index pages: pages, // visible nav indexes pagesCached: pagesCached, sheet: sheet, event: e || {}, // event object if available };

ottenere informazioni

Ottieni informazioni sul dispositivo di scorrimento.

slider.getInfo(); document.querySelector('.next-button').onclick = function () { // get slider info var info = slider.getInfo(), indexPrev = info.indexCached, indexCurrent = info.index; // update style based on index info.slideItems[indexPrev].classList.remove('active'); info.slideItems[indexCurrent].classList.add('active'); };

vai a

Vai alla diapositiva specifica per numero o parole chiave.

slider.goTo(3); slider.goTo('prev'); slider.goTo('next'); slider.goTo('first'); slider.goTo('last'); document.querySelector('.goto-button').onclick = function () { slider.goTo(3); };

giocare a

Avvia a livello di programmazione la riproduzione automatica dello slider quando la riproduzione automatica: true.

slider.play();

pausa

Arresta programmaticamente la riproduzione automatica dello slider quando la riproduzione automatica: true.

slider.pause();

aggiornaSliderHeight

Regola manualmente l'altezza del cursore quando autoHeight è vero.

gettone dei giochi di Wall Street
slider.updateSliderHeight();

distruggere

Distruggi il cursore.

slider.destroy();

ricostruire

Ricostruisci lo slider dopo la distruzione.

slider = slider.rebuild(); // this method returns a new slider Object with the same options with the original slider

Eventi personalizzati

Gli eventi disponibili includono: indexChanged, transitionStart, transitionEnd, newBreakpointStart, newBreakpointEnd, touchStart, touchMove, touchEnd, dragStart, dragMove e dragEnd.

come usare i metodi di un'altra classe in java
var customizedFunction = function (info, eventName) { // direct access to info object console.log(info.event.type, info.container.id); } // bind function to event slider.events.on('transitionEnd', customizedFunction); // remove function binding slider.events.off('transitionEnd', customizedFunction);

in alto

Ricaderci

.no-js .your-slider { overflow-x: auto; } .no-js .your-slider > div { float: none; }

Supporto browser

Scrivania: Firefox 8+ ✓ Chrome 15+ ✓ (dovrebbe funzionare su Cromo 4-14 anche, ma non ho potuto testarlo.) Safari 4+ ✓ Opera 12.1+ ✓ IE 8+ ✓

Mobile: Browser Android 4.2+ ✓ Chrome Mobile 63+ ✓ Firefox Mobile 28+ ✓ Maxthon 4+ ✓


Cdnjs
Le immagini sulla pagina demo provengono da https://unsplash.com/.

Licenza

Questo progetto è disponibile con licenza MIT.

Scarica i dettagli:

Autore: ganlanyuan

Sito ufficiale: https://github.com/ganlanyuan/tiny-slider