Dispositivo di scorrimento Vlasny su jQuery. Semplice cursore jQuery con tocco adattivo Bellissimi cursori su jquery

Da questo articolo, diamo un'occhiata a quanto è facile creare uno slider adattivo per il tuo sito web utilizzando CSS Flexbox e la trasformazione CSS.

Un progetto slider chiamato chiefSlider è stato promosso su GitHub. Puoi passare a Nuovo il prima possibile.

Slider con una slide attiva (senza loop):

Slider con tre diapositive attive (senza loop):

Un esempio che mostra come impostare uno slider per la rotazione degli articoli:

Elenchiamo i principali vantaggi di questo slider:

• Innanzitutto non crea cloni di elementi (items) per organizzare i loop, come viene implementato, ad esempio, nei plugin OwlCarousel e Slick;
• in caso contrario, non verrà archiviato nella libreria jQuery; Non si tratta solo di raccogliere vantaggi aggiuntivi, ma di regalare quelli facili;
• In terzo luogo, è pratico non apportare le modifiche necessarie al DOM del documento; L'unica cosa che devi fare è aggiungere e modificare i valori CSS degli elementi dello slider trasformandoli;
• in quarto luogo, non puoi permetterti un insieme minimo di funzioni; Ulteriori funzionalità possono essere aggiunte separatamente secondo necessità;
• In altre parole, è quindi adattivo. puoi vikorist su qualsiasi sito; L'adattabilità dello slider viene regolata utilizzando CSS aggiuntivi;
• Fondamentalmente, un certo numero di elementi attivi vengono configurati utilizzando CSS aggiuntivi; Ciò significa che puoi usarlo per creare un carosello sia con una diapositiva attiva che con qualsiasi altro numero.

L'installazione dello slider richiede 3 passaggi:

• aggiungi lo slider CSS chiefSlider al lato o file CSS, connessioni al lato;
• posiziona il codice HTML dello slider nella posizione desiderata sulla barra laterale;
• inserisci il codice JavaScript sul file laterale o js, ​​connettiti al lato.

Il codice CSS e JavaScript dovrebbero essere ridotti al minimo per garantire pagine più attraenti.

Lo slider chiefSlider viene creato utilizzando codice HTML, CSS e JavaScript (senza jQuery).

Codice HTML per lo slider chiefSlider:

Apparentemente lo slider ha un'architettura HTML molto semplice. A partire dal blocco principale, ovvero la classe slider. Questo blocco è composto da 3 elementi.

Il primo elemento è slider__wrapper. Funziona come wrapper per gli elementi slider__item (diapositive).

Gli altri due elementi (slider__control) sono visivamente pulsanti. Questo ti aiuterà a navigare nella diapositiva, quindi. transizione agli elementi anteriori e anteriori.

codice CSS capoSlider:

/* STILI PRINCIPALI */ .slider ( position: relative; overflow: hidden; ) .slider__wrapper ( display: flex; 50%; /* indica il numero di diapositive attive (in questa categoria 2 */ max-width: 50%; /* indica il numero di diapositive attive (ce ne sono 2 in questa categoria */ ) /* STILI PER I PULSANTI INDIETRO E AVANTI * / .slider__control ( position: Absolute; Display: None; Top: 50%; Transform: TranslateY(-50 %) ; allinea-elementi: centro; giustifica-contenuto: centro; larghezza: 40px; /* larghezza del pulsante */ altezza: 50px; contorno: 0; opacità: .9; /* visibilità */ ) .slider__control_left ( sinistra: 0; ) .slider__control_right ( destra: 0 ; ) .slider__control::before ( contenuto: " "; display: blocco in linea; larghezza: 20px; /* larghezza icona (freccia) */ altezza: 20px; /* altezza icona (freccia) */ sfondo: trasparente no-ripeti centro sfondo-dimensione: 100% ) .slider__control_left::before ( background-image : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www .w3.org/2000/svg" fill="%23fff viewBox="0 0 8 8"%3E %3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5 -1.5z"/%3E%3C/svg%3E "); ) .slider__control_right::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff " viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E "); )

Apparentemente il codice CSS dello slider non è molto flessibile. I significati principali, che possono essere utilizzati per personalizzare il nuovo aspetto dello slider, possono essere inseriti nei commenti.

Codice CSS che indica il numero di elementi attivi:

/* indica il numero di diapositive attive (questa opzione ne ha 2) */ flex: 0 0 50%; larghezza massima: 50%;

Questo codice imposta il dispositivo di scorrimento su un numero di elementi attivi superiore a 2.

Affinché il dispositivo di scorrimento, ad esempio, abbia un elemento attivo, il valore deve essere modificato nel passaggio:

/* indica il numero di diapositive attive (questa opzione ne ha 1) */ flex: 0 0 100%; larghezza massima: 100%;

La creazione dello slider adattivo si basa su query multimediali aggiuntive.

Ad esempio, uno slider, che sui dispositivi con uno schermo schifoso è responsabile della madre di una slide attiva, e su quelli grandi - perché:

Slider__item (flessione: 0 0 100%; larghezza massima: 100%;) @media (larghezza minima: 980px) ( .slider__item (flessione: 0 0 25%; larghezza massima: 25%; ))

Codice JavaScript per lo slider chiefSlider:

"usa rigoroso"; var multiItemSlider = (function () ( return function (selector) ( var _mainElement = document.querySelector(selector), // elemento principale del blocco _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // wrapper for.slider- item_s = _mainElement.querySelectorAll(".slider__item"), // elementi (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // elementi _sliderControlLeft = _mainElement.querySelector(".slider__ pulsante "SINISTRA" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // pulsante "DESTRA" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // larghezza del wrapper _itemWid dth), // larghezza di un elemento _positionLeftItem = 0, // sinistra posizione elemento attivo _transform = 0, // valori di trasformazione sull'array _items _sliderItems.forEach(funzione (elemento, indice) ( _items.push(( elemento: elemento, posizione: indice, trasformazione: 0 ))); )); = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = funzione (direzione) ( if (direzione === "destra") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1)).getMax) ( ritorno; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control _wrapperWidth / _itemWidth) >= position.getMax) ( ControlRight .classList.remove("slider__control_show"); _positionLeftItem++; _transform -= _step; ) if (direzione === "sinistra") ( if (_ ; ) return (element.contains(elemFromPoint(rect.left, rect.top) )) ||. elemento.contains(elemFromPoint(rect.right, rect.top)) ||elemento.contains(elemFromPoint(rect.right, rect. bottom)) ||elemento.contains(elemFromPoint(rect.left, rect. metter il fondo a)));

È possibile posizionare il clic su _isElementVisible, ad esempio, all'inizio della funzione _transformItem. Ciò consente di impostare il cambio automatico delle diapositive se il cursore è attualmente nella posizione della finestra.

Var _transformItem = funzione (direzione) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...

Questa versione dello slider adattivo si estende oltre le precedenti, consentendo di modificare il numero di elementi attivi (slide) quando si modifica la dimensione della finestra del browser. Assicurati di non modificare le dimensioni del browser, altrimenti ciò potrebbe accadere.

Implementato con l'aiuto aggiuntivo di Resize e dell'array _states. Il massiccio viene utilizzato per il calcolo. Non esitate a reinizializzare lo slider se non necessario.

Il web design adattivo o, se lo si desidera, sensibile non è solo una tendenza di design alla moda, ma anche uno standard per lo sviluppo di siti Web, che garantirà la versatilità dei siti Web e un'armoniosa armonia visiva sugli schermi di vari dispositivi di consumo. Proprio di recente, durante lo sviluppo di un modello adattivo, ho dovuto affrontare varie difficoltà nell'integrazione di slider e gallerie di immagini senza disturbare lo stile di design originale. Adesso è tutto molto più semplice, realizzando allo stesso tempo le tantissime soluzioni già pronte e soprattutto mantenendone la maggior parte liberamente accessibili, con un codice di uscita segreto.

Attraverso la diversità degli strumenti presentati, ho dato una breve occhiata agli sviluppi più importanti degli slider jQuery adattivi per visualizzare immagini che appaiono continuamente e vengono visualizzate ovunque senza confini. assolutamente gratuito.

Viene visualizzato uno slider jQuery adattivo con una meravigliosa serie di effetti visivi (rotazioni, raffiche, spread, spirali, persiane, ecc.) e una varietà di modelli già pronti. Con l'aiuto del master di inserimento della barra laterale integrato in WOW Slider, puoi creare facilmente e senza sforzo presentazioni miracolose per il trattamento delle malattie. Sul sito del rivenditore è presente tutta la documentazione necessaria per l'installazione e l'utilizzo del plugin russo, la miracolosa applicazione live del plugin. Lo stesso plugin Wordpress e il modulo per Joomla sono disponibili anche per il download. Congratulazioni per il fatto che questo meraviglioso slider ha molto da offrire, sia ai principianti che ai webmaster che hanno avuto l'idea.

HiSlider - HTML5, slider Jquery e galleria di immagini, un plugin assolutamente gratuito per modifiche speciali su siti gestiti dai sistemi più diffusi: WordPress, Joomla, Drupal. Con l'aiuto di questo strumento semplice ma funzionale, puoi creare incredibili presentazioni, presentazioni efficaci e annunci di nuove notizie sulle pagine dei tuoi siti senza troppi sforzi. Numerosi modelli e skin già pronti per lo slider, effetti di transizione attraenti, visualizzazione di vari contenuti multimediali: video da YouTube e Vimeo, strumenti di personalizzazione per l'utente, ecc.

Nivo Slider è un buon vecchio, ben noto a tutti gli esperti, uno degli slider di immagini più belli e semplici della storia. Il plugin JQuery Nivo Slider è gratuito per l'uso e l'ulteriore sviluppo, che viene esteso con la licenza MIT. È anche un ottimo plugin per WordPress, ma sfortunatamente è anche a pagamento e costa $ 29 per una licenza. La cosa migliore da fare è semplicemente dedicare un po' di tempo ai file WP e allegare la versione jQuery gratuita del plugin Nivo Slider al tuo blog, in modo da poter ottenere informazioni sufficienti.
Per quanto riguarda la funzionalità, tutto è in ordine. Per il lavoro utilizziamo la libreria jQuery v1.7+, ottimi effetti di transizione, regolazioni semplici e facili, layout adattivo, ritaglio automatico delle immagini e molto altro.

L'idea dello slider è stata ispirata dai rivenditori che hanno familiarità con lo stile familiare di presentazione dei prodotti Apple, in cui una serie di piccoli oggetti cambiano quando si fa clic sulla categoria selezionata con un semplice effetto di animazione. Codrops ti presenta un rapporto su come creare uno slider, un nuovo layout di markup HTML, una serie di regole CSS e un plugin che converte jQuery, oltre a un meraviglioso esempio dal vivo di uno slider personalizzato.

Lo slider a schermo intero viene visualizzato utilizzando JQuery e CSS3 + strumento di reporting con integrazione plugin sul lato sito. L'idea è di tagliare la diapositiva a flusso aperto con il contenuto precedente prima di passare alla posizione successiva o precedente. Con l'aiuto delle animazioni JQuery e CSS, puoi creare transizioni uniche tra le diapositive. Il layout del dispositivo di scorrimento adattivo garantisce che abbia ancora un bell'aspetto sugli schermi di diversi tipi di dispositivi.

C'è uno slider che regola automaticamente la larghezza e l'altezza in base alle dimensioni del contenitore in cui viene espanso. Aggiungi uno slider semplice e personalizzato che gira su JQuery, con navigazione nella parte inferiore, quando cambi la dimensione dello schermo, la navigazione viene visualizzata sotto forma di icone. La documentazione è molto istruttiva (lezione sulla creazione) e applicazione dal vivo del vikoristan.

Una versione sperimentale dello slider mostra immagini con transizioni da un piano 3D. Le immagini sono divise in due colonne orizzontali; utilizzando le frecce di navigazione è possibile modificare e spostare l'immagine della skin da una vista all'altra. Non c'è niente di speciale in questo, ma l'idea stessa e la tecnica di Vikonannya per ottenere il frutto.

Molto semplicemente, slider di immagini jQuery reattivo al 100% e a schermo intero. Il lavoro dello slider si basa sulle transizioni CSS (transition power) in connessione con la magia di jQuery. Il valore della larghezza massima è impostato su 100%, quindi la dimensione delle immagini cambia in base alle modifiche delle dimensioni dello schermo. Non ci sono effetti di animazione speciali nel design, tutto è semplice e progettato per un funzionamento ininterrotto.

Il nome è autoesplicativo, è probabilmente uno degli slider di immagini jQuery più leggeri e minimalisti disponibili (plugin da 1kb). ResponsiveSlides.js è un fantastico plugin JQuery che crea presentazioni, elementi pop-up al centro del contenitore. Funziona con un'ampia gamma di browser, comprese tutte le versioni di IE, il famoso gala del progresso in IE6 e versioni successive. Il robot utilizza le transizioni CSS3 insieme a JavaScript, tanto per essere sicuri. Ordina facilmente un elenco non ordinato, regola le transizioni e gli intervalli di tempo, cambia diapositive automaticamente e manualmente e supporta più presentazioni contemporaneamente. L'asse è un asse "malyuk" shvidky.

Camera è un plug-in JQuery gratuito per l'organizzazione di presentazioni sulle pagine del sito Web, uno slider leggero con effetti di transizione pari a zero, un layout adattivo al 100% e una configurazione molto semplice. Si adatterà meravigliosamente agli schermi di qualsiasi dispositivo informatico (monitor di PC, tablet, smartphone e telefoni cellulari). Possibilità di dimostrazione del video scaricato. Cambio automatico delle diapositive e funzionamento manuale di pulsanti aggiuntivi e blocco miniature di immagini. C'è anche una galleria completa di immagini del compatto viconn.

Un altro semplice dispositivo di scorrimento adattivo su jQuery. Le diapositive possono contenere qualsiasi contenuto, video, immagini, testo e altri elementi. Supporto esteso per touch screen. Animazioni di transizione CSS Vikoristannaya. Esistono molte varianti diverse nella presentazione di presentazioni e gallerie di immagini compatte. Controllo automatico e manuale. Miscelazione di diapositive utilizzando pulsanti aggiuntivi e selezione di miniature. Piccole dimensioni del file di output, ancora più semplice per l'impostazione e l'implementazione.

FlexSlider 2 — Versione aggiornata dello slider a nome singolo, con maggiore velocità di risposta, modifica dello script e riduzione al minimo delle riorganizzazioni/riscritture. Il plugin include uno slider di base, un controllo slide per miniature aggiuntive, frecce sinistra-destra e una barra di navigazione inferiore nell'aspetto dei pulsanti. Possibilità di visualizzare video in diapositive (vimeo), personalizzazione flessibile dei parametri (transizioni, design, intervallo orario), layout completamente adattivo.

Benvenuto nel popolare plug-in jQuery adattivo per la creazione di gallerie e slider di immagini di alta qualità. L'interfaccia a scorrimento, nella sua interezza, ricorda visivamente il lettore video originale e il plug-in include una serie di temi di design diversi. Supporto per video e immagini scaricati dai servizi più diffusi: Flickr, Vimeo, YouTube e altri. Documentazione dettagliata da aggiustamento e wiki.

Uno slider di immagini JQuery semplice, senza fronzoli e gratuito, scritto appositamente per il web design reattivo. Blueberry è un plugin JQuery sperimentale con codice sorgente chiuso. Design minimalista, nessun effetto, solo un'unione fluida di immagini che possono essere modificate una dopo l'altra entro un'ora. Tutto è molto semplice: installa, connetti e vai.

Uno slider jQuery molto compatto visualizzato con elementi Lightbox. Nonostante le sue piccole dimensioni, è facile posizionarlo in qualsiasi contenitore, in un'unica voce sotto forma di miniature, quando ci si passa sopra con il mouse o si fa clic su di esso, si attiva una lightbox con un'immagine più grande e elementi di controllo. È facile posizionare un dispositivo di scorrimento di questo tipo su altri pannelli per presentare prodotti e annunciare nuovi prodotti. Un'ottima soluzione per siti Web con una grande quantità di informazioni.

Slider adattivo gratuito con transizioni CSS3 avanzate. Stile minimalista, 3 temi di design. La cornice della skin corre orizzontalmente, appare al centro, l'immagine va a sinistra, la didascalia a destra, le miniature sono duplicate nell'angolo in basso a destra. Un'esposizione di prodotti sul lato per la visione nella pelle. I controlli includono anche i pulsanti avanti e indietro. Supporto per i browser attuali.

Uno slider di immagini molto semplice con funzionalità e impostazioni, regolazione della presenza di cambiamenti nella velocità di cambio delle diapositive, connessione alla modalità manuale (i pulsanti di controllo sono attivati), presentazione ininterrotta. Questo cursore potrebbe avere il diritto di essere e meno un vantaggio, non avendo ricevuto nulla di particolarmente utile in questo studio, forse è un brutto scherzo)))

Uno slider di immagini così meraviglioso e adattivo da Volodymyr Kudinov e i suoi colleghi. Uno strumento buono e ben fatto, fornito con mozziconi iniziali e istruzioni dettagliate per la creazione, l'installazione e l'installazione. Design adattivo, pulsanti carini e frecce verdi, tutto funziona bene e con calma, senza pressione.

Plugin gratuito per slider jQuery con effetto parallasse per immagini e diapositive di testo. L'animazione delle diapositive aumenta il valore del display con il pieno controllo sui parametri della pelle dell'ora e dell'animazione. Possibilità di animazione per più elementi su una diapositiva. Puoi installare diversi metodi di animazione, creare diapositive o passare direttamente dal brano. Visualizzazione automatica e navigazione manuale di frecce di navigazione aggiuntive che si uniscono quando si passa con il mouse sopra l'immagine. 10 tipi di effetti di animazione, diapositive e molto altro.

Uno sguardo intorno al mondo è molto ricco, ma poco informativo a causa del gran numero di prodotti che si guardano. Tutti i dettagli e le descrizioni dettagliate delle capacità funzionali di ciascun plugin possono essere trovati direttamente sulle pagine del rivenditore. Non ho idea che qualcuno stia cercando quello strumento tanto necessario per creare slider di immagini colorate sulle pagine dei propri siti web.

Se stessimo pensando a questo, sarebbe un male per noi lavorare con modelli russificati? Pensaci solo per un momento. Ho passato un'ora a lavorare con modelli in lingua inglese. Ci affrettiamo a soddisfarti con ciò che ora puoi trovare sul mercato TemplateMonster. Il testo di ciascuno di essi è stato scritto a mano. E, naturalmente, tutte le soluzioni già pronte sono incredibilmente semplici per il Vikoristan.

Con rispetto Andriy

Nota dell'autore: nonostante fosse sensibile alla “morte” di parti di pagine web visibili senza scorrimento, non c'era bisogno di un buon slider. Siamo onesti, se vuoi, lo slider è divertente. Inoltre, non c’è niente altro a che fare con contenuti che collassano senza dare all’utente un effetto “wow”. Tutti gli slider sono un insieme di più diapositive, quindi è importante cambiarne una alla volta in modo che il codice dello slider sia il più leggero possibile. In tali situazioni, jQuery ci aiuterà.

Dai un'occhiata ai 20 cursori jQuery su Envato Market e vedrai che ci sono cursori che sono più di un semplice blocco di immagini che cambiano senza intoppi.

Uno slider altamente adattivo, adatto anche ai touch screen, significa molto di più di prima. RoyalSlider include alcune caratteristiche interessanti: adattabilità e funzionamento con touch screen. Buona scelta, perché la gallery è scritta in HTML5 e CSS3.

Elenco delle funzioni:

JavaScript. Avvio rapido

Ottimizzazione SEO

Alto livello di regolazione

Oltre 10 modelli di pannocchie

Ä fallback per le transizioni CSS3

A mio avviso, la caratteristica più interessante è l '"architettura modulare degli script", che consente di includere voci non necessarie dal file JS principale, modificando così l'input. RoyalSlider, galleria di immagini touchscreen su JQuery: uno slider JavaScript affidabile che può migliorare il set di strumenti per qualsiasi sviluppatore.

Non è così semplice realizzare un lavoro “rivoluzionario” con uno slider. Se vuoi parlare di slider, puoi aggiungere molte altre funzioni. Tuttavia, Slider Revolution è davvero un ottimo test. Tra gli slider JQuery, questa istanza offre tutti i possibili vantaggi.

L'elenco delle possibilità per lo slider del desktop è lungo, quindi ne elencherò solo alcune:

Effetto parallasse e animazione koristuvach

Il numero di palline e diapositive con messaggi non è limitato

pronti all'uso, stili da perfezionare in profondità

e molto di più

La possibilità di aggiungere un'immagine, utilizzare un lettore video e inviare dai social network rende Slider Revolution una delle opzioni più flessibili e personalizzabili disponibili.

Al di là del nome “Plugin slider adattivo jQuery LayerSlider” non è possibile valutare correttamente questo slider.
Oltre 200 transizioni 2D e 3D tra le diapositive per far girare la testa a chiunque.

Un paio di funzioni straordinarie:

13 skin e 3 tipi di menu

Possibilità di posizionare un'immagine congelata sopra il cursore

І Fallback JQuery

E molto di più

Come con il dispositivo di scorrimento precedente, puoi aggiungere qualsiasi contenuto, ad esempio contenuto multimediale residente in HTML5. LayerSlider adora gli slider ed è anche peggio.

jQuery Banner Rotator / Slideshow - Aggiungi un semplice cursore senza sacrificare la funzionalità principale.

Possibilità:

Tipi di strumenti, inserti di testo, ecc.

vista in avanti e diverse opzioni per la revisione dei componenti

Temporizzatore con otturatore per uno o tutti i cursori

Transizioni multiple per tutte le diapositive o transizioni multiple per le transizioni della pelle

jQuery Banner Rotator / Slideshow, in linea con gli altri slider jQuery, ha solo funzionalità di base, ma non è facile dimenticarsene.

Ogni cursore che appare al centro ha il suo serbatoio unico e riscontra eventuali problemi con la sua Galusa. Non importa. All In One Slider può essere chiamato "tutto compreso".

Penso che la maggior parte degli sviluppatori e designer web potrebbero ripensare troppo alla decisione, altrimenti cercheranno qualcosa di nuovo. E queste “novità” includono:

Rotatore di striscioni

Banner con anteprima

Banner con playlist

Dispositivo di scorrimento del contenuto

Giostra

Tutti i tipi di slider forniscono la maggior parte delle funzionalità, ma non tutto ciò che è richiesto dagli slider jQuery. All In One Slider è la soluzione all-inclusive?

Se il tuo slider non risponde e non supporta i touch screen, hai lo slider sbagliato. UnoSlider ha ragione.

Questo slider conosce il suo posto al sole tra semplicità e un ricco set di funzioni. Funzioni:

Supporto per argomenti

12 temi già pronti

40 transizioni

Supporto IE6+

Tutte le funzioni sono progettate e stilizzate in modo intelligente, quindi puoi utilizzare UnoSlider come uno slider di contenuti avanzato con la possibilità di aggiungere temi.

Stai dicendo "uno slider jQuery per modificare tutto"? Prova Master Slider: slider touchscreen JQuery per diverse dimensioni dello schermo.

Se manca il design giusto, questa copia è una delle più belle:

Oltre 25 modelli

Vai alla velocità hardware

Supporto toccando e scorrendo

E molto di più

Transizioni interattive, palline animate e punti caldi attireranno singolarmente la tua attenzione. Master Slider è uno spirito mistico.

TouchCarousel aggiunge supporto e aggiornamenti gratuiti. Tuttavia, non tutte le funzioni di questo leggero slider JQuery sono di tipo carosello.

Poiché il nome contiene la parola "tocco", puoi immaginare che lo slider sia completamente adattivo e supporti il ​​tocco. Altre funzioni:

Ottimizzazione SEO

Creazione automatica più intelligente

CSS3 vai al collegamento hardware

Interfaccia utente personalizzata e 4 skin per Photoshop

TouchCarousel, attraverso il suo esclusivo scorrimento fisico delle diapositive, introduce una gamma completamente nuova di esperienze sui dispositivi mobili.

Gli slider jQuery possono essere utilizzati sui siti web. Potrebbero anche essere utili per i componenti aggiuntivi web. Advanced Slider ti consente di creare qualsiasi cosa.

Con il layout HTML o XML, lo slider inserito riesce a raggiungere l'inevitabile obiettivo:

Palle animate e video intelligenti

Oltre 100 transizioni e oltre 150 autorità in fase di ottimizzazione

15 skin per lo slider, 7 skin per la barra di scorrimento e supporto lightbox inclusi

Navigazione da tastiera, supporto punti e personalizzazione

E molto di più

Tuttavia, la caratteristica più importante di Advanced Slider è l'API jQuery XML Slider, che rende lo slider un'opzione ideale per il tuo programma web.

Uno di questi cursori JQuery ti incoraggerà a dare un'occhiata alla demo prima di iniziare a leggere le sue capacità. Vuoi solo capire cosa significa "effetto zoom avanti/indietro".

L'effetto dello zoom è debole, ma aggiunge controllo e corretta manipolazione dell'immagine in un momento in cui gli altri cursori sono statici. Caratteristiche dello slider:

Transizione CSS3 tra le palle

Parametro di fine animazione per le palline

Opzioni a larghezza fissa, schermo intero e larghezza intera

Testo animato nei formati HTML e CSS

La maggior parte degli slider tenta di incorporare più effetti e jQuery Slider Zoom In/Out Effect Fully Responsive ha solo l'effetto Ken Burns, ma implementazioni migliori.

Come il noto Advanced Slider - jQuery XML Slider, jQuery Carousel Evolution ha una propria API, che può essere personalizzata per migliorare la funzionalità o integrare lo slider in un altro progetto.

JavaScript. Avvio rapido

Impara le basi di JavaScript in un'applicazione pratica per creare un'applicazione web

Con immagini, markup HTML, video YouTube e Vimeo puoi anche guardare:

Ottimizzazione SEO

9 stili di carosello

Effetti dell'ombra e dell'immagine

La dimensione dell'immagine può essere regolata sia per la parte anteriore che per quella posteriore

jQuery Carousel Evolution: un semplice carosello con opzioni di scelta illimitate.

Sexy Slider non è più sexy come una volta. Tuttavia, nel corso dei suoi secoli, lo slider ha guadagnato la sua fiducia.

A prima vista, lo slider non è particolarmente impressionante, ma se lo modifichi bene, si adatterà perfettamente al tuo design. Possibilità:

Autoprogrammazione delle diapositive

Didascalie prima dell'immagine

Creazione ininterrotta di diapositive

6 effetti di transizione

Sexy Slider ti assicura di sbloccare tutto il tuo potenziale.

Con tutti questi design per dispositivi mobili e touch screen, puoi utilizzare lo slider JQuery, senza dimenticare i computer desktop.

jQuery Image & Content Scroller con Lightbox supporta l'input da tastiera e l'input dalla rotellina del mouse, oltre ad altre funzionalità:

Orientamento orizzontale e verticale

Firme di testo nelle chiamate centrali o slider

Possibilità di impostare il numero di diapositive visibili contemporaneamente

Immagini incorporate, Flash, iframe, Ajax e contenuti online

Lo slider ha anche una lightbox. Per jQuery Image & Content Scroller con Lightbox, non è possibile avviare lo slider stesso, ma avviare anche la lightbox.

La maggior parte degli slider jQuery ha un proprio design. Puoi personalizzarlo tu stesso, ma a volte vuoi semplicemente che tutto sia al centro del cursore. Distinti saluti, mi presento a Translucent.

Lo slider ha molte preimpostazioni. Forse devi solo impostare le canzoni da accordare e il gioco è fatto. Possibilità:

6 stili diversi

4 effetti di transizione

2 vai scorrendo

Configura pulsanti e didascalie

Come altri, questo dispositivo di scorrimento supporta l'accelerazione tornado, adattiva e hardware. Translucent è uno slider dal design minimale che mette in primo piano il contenuto stesso.

Desideri creare un sito Web a schermo intero composto da diapositive? Allora hai bisogno di FSS.

In effetti, con l'aiuto di questo slider JQuery, è molto semplice creare un sito Web con slider a schermo intero. Possibilità:

Supporto AJAX

Barra di scorrimento

Supporto per la tecnologia di collegamento profondo

2 diversi effetti di transizione

Inoltre, utilizzare la guida a 11 lati per supportare la tastiera. Proteggi il sito web nemico giusto è FSS vaga, meno di 5Kb.

Un altro esempio di uno slider JQuery che si concentra sugli stili e su quanto male gestisce il suo lavoro. Zozo Accordion è facile per coloro che cercano un buon slider per fisarmonica con la possibilità di cambiare stile.

Questa bellezza con l'animazione CSS3 può anche fornire una vasta gamma di funzioni:

Fisarmonica orizzontale e verticale

Semantica HTML5 e ottimizzazione SEO

Supporto per punti, tastiere e WAI-ARIA

Più di 10 skin e 6 layout

E molto di più

Zozo Accordion offre supporto gratuito e aggiornamenti costanti, oltre a tutte le funzioni che desideri in una fisarmonica JQuery.

Il plug-in jQuery Responsive OneByOne Slider è più simile a una semplice animazione piuttosto che a uno slider. Invece di visualizzare una diapositiva alla volta, questa istanza riempie lo schermo di diapositive, una diapositiva alla volta, finché l'area non esaurisce lo spazio e quindi si passa alla diapositiva successiva.

L'animazione CSS3 è basata su Animate.css, è semplice, può essere composta da alcune palline ed è compatibile con i dispositivi mobili. Funzioni:

C'è anche un'opzione di navigazione utilizzando il trascinamento della selezione. Il plug-in jQuery Responsive OneByOne Slider è basato sul carosello Twitter Bootstrap.

Nessun dispositivo di scorrimento jQuery è più semplice. Per funzionare, devi utilizzare solo uno slider da 3Kb, così puoi aggiornare Accordionza con lo slider a fisarmonica più leggero.

Se non ti senti a tuo agio con tre opzioni di stile, puoi inviare tu stesso HTML e CSS. Possibilità:

Navigazione tramite tastiera

Effetti e pulsanti facili da personalizzare

Tecnica di riduzione progressiva: funziona senza JavaScript

Ricorda che Accordionza può visualizzare un numero qualsiasi di opzioni di contenuto misto, il che renderà il tutto ancora più impegnativo.

MightySlider è uno slider davvero stretto. Può essere utilizzato non solo come semplice dispositivo di scorrimento delle immagini, ma anche come dispositivo di scorrimento unidirezionale a schermo intero con navigazione attraverso le voci di menu. Con questo aiuto puoi creare un meraviglioso sito web unilaterale.

Sotto il cofano troverai una serie di opzioni:

Supporto tastiera, orsi e torcan

CSS3 vai al collegamento hardware

Layout e ottimizzazione SEO puramente validi

Il numero di diapositive, palline per firme ed effetti prima di esse non è incluso

L'API è ancora più stretta e gentile con i ladri, il che rivela le diverse modalità della sua crescita. MightySlider è uno slider JQuery meraviglioso e progressivo con codice pulito e ben commentato.

Parallax Slider funziona come il plug-in jQuery Responsive OneByOne Slider e ti consente di animare una skin attorno al centro di una diapositiva. Puoi animare tutte le diapositive o solo una, aggiungendo l'animazione parallasse.

Il set comprende 4 slider di diverso tipo, tutti con effetto parallasse. Come altri slider jQuery, qui:

Nuovo umore

Sostieni Torkan

Completamente adattivo, numero illimitato di palline

Autoprogrammazione, looping, regolazione dell'altezza e della larghezza, nonché timer

Palloncini animati: non solo testo ma immagini. Puoi anche aggiungere video YouTube, Vimeo e HTML5. Parallax Slider è un altro buon esempio di come gli effetti Flash possano essere creati meglio di Flash stesso, anch'esso supportato su tutti i dispositivi.

È importante notare che gli slider jQuery sono cresciuti da quello che sono, che sostituisce semplicemente un'immagine con un'altra, a un fantastico set di strumenti creativi. L'infezione include slider 3D, parallasse, slider a pagina intera, adattivi che possono essere visualizzati sia su computer desktop che su smartphone.

Se non ti piace lo slider in questo elenco, puoi sempre seguire il tutorial sul codice jQuery su Envato per creare qualcosa di completamente nuovo e unico.

Bene, dai un'occhiata agli altri slider su Envato Market: c'è molto da scegliere. Qual è il tuo slider JQuery preferito e perché?

Vorrei iniziare dicendo che questo articolo è stato scritto per spiegarti come creare uno slider di immagini a scorrimento per le pagine web. Questo articolo, in ogni caso, non ha carattere iniziale, ma serve piuttosto come esempio di come si può realizzare il nostro obiettivo. Puoi utilizzare il codice contenuto in questo articolo come modello per tali indagini, sono fiducioso che sarò in grado di trasmettere al lettore in modo chiaro e semplice l'intera essenza di ciò che ho scritto.

E ora, prima che tu lo sappia, di recente ho avuto bisogno di mettere uno slider su un sito, ma dopo aver cercato su Internet script già pronti, non sapevo nulla di utile, perché Alcuni non hanno funzionato come richiesto e altri non si sono avviati senza errori sulla console. Vikoristovat jQuery - i plugin per lo slider Meni si sono rivelati completamente inutili, perché... Vorrei saperlo, ma se non ho una conoscenza sufficiente del meccanismo di funzionamento, non è ottimale utilizzare un plugin per uno slider. Anche comprendere gli script storti non era la mia cosa preferita, quindi ho deciso di scrivere il mio script per lo slider, di cui io stesso vedrò di aver bisogno.

Per cominciare, dobbiamo comprendere la logica dello slider stesso, per poi procedere all'implementazione, in questa fase è ancora più importante comprendere il meccanismo di funzionamento sottostante, perché senza di esso non possiamo scrivere codice che funzioni esattamente come vogliamo.

Il nostro oggetto principale sarà il viewport, che sarà il blocco in cui visualizzeremo e ruoteremo le nostre immagini, che sarà il nostro slidewrapper, che sarà il nostro blocco che ospiterà tutte le immagini disposte su una riga, e che cambierà la tua posizione al centro della finestra stessa.


Inoltre, sui lati al centro della finestra, verticalmente al centro, i pulsanti Avanti e Indietro si espanderanno e, quando si fa clic su di essi, cambieremo anche la posizione del nostro slidewrapper nella finestra, provocando così l'effetto di immagini da sfogliare. E, decidiamo, l'oggetto rimanente saranno i nostri pulsanti di navigazione, che si trovano nella parte inferiore della finestra.


Quando facciamo clic su di essi, guardiamo semplicemente il numero di serie di quel pulsante e facciamo nuovamente clic sulla diapositiva di cui abbiamo bisogno utilizzando lo stesso percorso di spostamento dello slidewrapper (lo spostamento verrà effettuato modificando il potere CSS di trasformazione, il cui valore sarà costantemente calcolato isya).

Penso che la logica dell'intero processo possa essere diventata più chiara dopo quello che ho inserito, ma se qui il problema non è ancora chiaro, allora tutto sarà chiarito nel codice qui sotto, ci vuole solo un po' di pazienza.

Ora scriviamo! Prima di tutto, apriamo il nostro file indice e scriviamo lì le marcature di cui abbiamo bisogno:

In realtà, non c'è nulla di complicato, block-for-slider funge da blocco stesso, in cui verrà posizionato il nostro slider, nel mezzo del quale si trova il viewport stesso, in cui si trova il nostro slidewrapper, e anche un elenco degli allegati, qui ci sono le diapositive e le immagini img al centro. Si prega di rispettare il fatto che tutte le immagini devono avere le stesse dimensioni o essere proporzionate, altrimenti il ​​cursore apparirà storto, perché Le sue dimensioni dovrebbero essere basate sulla proporzione dell'immagine.

Ora dobbiamo stilizzare tutto a destra, quindi non commentare particolarmente gli stili, ma voglio comunque prestare attenzione al tuo rispetto, in modo che non ci sia confusione in futuro.

Cominciamo con block-for-slider , che, ripeto, è il nostro blocco laterale, che mettiamo sotto lo slider, la cui altezza dipende dalla sua larghezza e dalla proporzione dell'immagine, perché Il viewport occupa l'intera larghezza del blocco per slider, poi la slide stessa ha la stessa larghezza e, ovviamente, l'immagine al centro cambia altezza in base alla larghezza (le proporzioni vengono mantenute). Ho spostato questo elemento su un lato orizzontalmente al centro, rientrandolo di 100px, dandogli una posizione comoda per il calcio.

L'elemento viewport, come già accennato, occupa l'intera larghezza del nostro block-for-slider, che ha il potere di overflow:hidden, che ci consente di allegare la nostra linea di immagine in modo che non rientri nell'ambito del viewport.


Ora arriva la potenza dei CSS: user-select:none ti consente di far apparire blu gli elementi del cursore circostanti quando fai clic sui pulsanti più volte.

Passiamo allo slidewrapper, perché position:relativo e non assoluto? È semplice, perché... Se scegliamo un'altra opzione, allora con il power viewport overflow: hidden non otterremo assolutamente nulla, perché Il viewport stesso non è adattato all'altezza dello slidewrapper, quindi lo impostiamo su Height:0. Perché la larghezza è così importante e perché la impostiamo sempre? A destra, le nostre diapositive avranno una larghezza pari al 100% del viewport e per distanziarle lungo la linea abbiamo bisogno di un punto in cui staranno, quindi la larghezza dello slidewrapper dovrebbe essere pari al 100% del viewport larghezza del viewport, moltiplicata per il pennello scorrevole (la mia scelta è 4). C'è una funzione di transizione e di temporizzazione della transizione, quindi 1s significa che cambiare la posizione dello slidewrapper richiederà 1 secondo e staremo attenti, e il tipo di animazione è easy-in-out, quando inizi per favore sbrigati a metà , e poi torna a dormire, qui ora puoi impostare il valore alle autorità.

Il blocco offensivo delle autorità imposta i perni e i suoi elementi figli non hanno input, ecco i commenti della domanda.

Successivamente, daremo uno stile alle nostre diapositive, la loro larghezza deve essere uguale alla larghezza del viewport, perché Se la larghezza dello slidewrapper è uguale alla larghezza del viewport moltiplicata per il numero di diapositive, per ottenere nuovamente la larghezza del viewport, dobbiamo dividere il 100% della larghezza dello slidewrapper per il numero di diapositive ( nel mio caso, beh, su 4). Dopodiché li trasformeremo in piccoli elementi utilizzando l'ulteriore display:inline e imposteremo il flusso attorno al male, aggiungendo potenza a float:left . A proposito di list-style:none, posso dire che vikory yogo per ottenere il marcatore predefinito li, nella maggior parte dei casi è lo standard.

Con slide-img tutto è semplice, l'immagine occuperà l'intera larghezza della diapositiva, la diapositiva si adatterà alla sua altezza, lo slidewrapper si adatterà all'altezza della diapositiva e l'altezza del viewport assumerà la stessa altezza come slidewrapper, quindi l'altezza del nostro cursore sarà proporzionata. Le immagini e le dimensioni sono accanto, sotto il cursore, di cui ho già scritto di più.

Penso che abbiamo deciso questi stili, possiamo fare una semplice presentazione senza pulsanti e dopo, quando passiamo a ciò che possiamo fare, possiamo modellarli.

Apriamo il nostro file js, in qualunque codice slider ci sarà, non dimenticare di includere jQuery, perché Scriveremo per questo framework aggiuntivo. Prima di parlare, al momento della stesura di questo articolo, sto utilizzando la versione vikory di jQuery 3.1.0. Il file stesso con lo script deve essere incluso nel tag body, perché Lavoreremo con gli elementi DOM che devono essere inizializzati prima.

Per ora, dobbiamo annunciare un paio di modifiche, una salverà il numero della diapositiva di cui abbiamo attualmente bisogno nel viewport, lo chiamerò slideNow e l'altro salverà un numero di queste diapositive, chiamato slideCount.

È necessario impostare il valore slideNow su 1, perché Se sei interessato alle pagine che escono dal nostro layout, visualizzeremo la prima slide nel viewport.

In slideCount possiamo ospitare un numero di elementi figli dello slidewrapper, qui tutto è logico.
Successivamente, è necessario creare una funzione responsabile del passaggio delle diapositive da destra a sinistra, in questo modo:

Possiamo chiamarlo nel blocco principale del nostro codice, quindi arriviamo a quel punto, ma per ora diciamo alla nostra funzione cosa deve fare:

Prima di tutto, controlliamo cosa c'è nella restante diapositiva della nostra pagina? A questo scopo, prendiamo il numero di tutte le nostre diapositive utilizzando $("#slidewrapper").children().length e lo abbiniamo al numero della nostra diapositiva, poiché sembrano uguali, il che significa che dobbiamo iniziare mostrando di nuovo la pagina, 1 slide , il che significa che modifichiamo il potere di trasformazione CSS in slidewrappertranslate(0, 0) , in modo da cambiarne la posizione in modo che la prima diapositiva appaia nella nostra vista, non dimentichiamoci di -webkit e - ms per un adeguato rendering tra browser (div. .vidnik con poteri css). Successivamente, non dimenticare di aggiornare il valore della modifica slideNow, informandolo che è in vista la diapositiva numero 1: slideNow = 1;

Dobbiamo verificare il numero di diapositive, che molto probabilmente siamo, tra il numero delle nostre diapositive, altrimenti torneremo alla prima diapositiva.

Dato che la prima mente non arriva al culmine, non possiamo parlare di quelli in cui siamo attualmente né sull'altra diapositiva né su qualsiasi altra cosa, il che significa che dobbiamo passare a quella offensiva, che viene fatta da spostando lo slidewrapper a sinistra al valore, pari a larghezza viewport , lo spostamento sarà nuovamente fornito tramite la nota potenza di Translate , il cui valore è simile a "translate(" + TranslateWidth + "px, 0)", dove TranslateWidth è il valore di come viene spostato il nostro slidewrapper. Prima di parlare, diamo voce a questa modifica all'inizio del nostro codice:

Dopo essere passati alla diapositiva successiva, diciamo alla nostra slideNow che c'è un'altra diapositiva successiva: slideNow++;

Al momento, alcuni lettori potrebbero essere confusi: perché non abbiamo sostituito $("#viewport").width() con qualcosa come slideWidth, in modo da conoscere sempre la larghezza della nostra diapositiva? La risposta è abbastanza semplice, poiché il nostro sito è adattivo, ovviamente anche il blocco delle visualizzazioni sotto lo slider è adattivo, quindi puoi capire che quando si modifica la larghezza della finestra senza ridimensionare la pagina (ad esempio girandola del telefono in base alla larghezza), la visualizzazione cambierà e, ovviamente, cambierà anche la larghezza di una diapositiva. In questa configurazione, il nostro slidewrapper verrà spostato alla stessa larghezza dell'originale, il che significa che le immagini verranno visualizzate in parte o non verranno visualizzate affatto nel viewport. Scrivendo nella nostra funzione $("#viewport").width() invece di slideWidth, possiamo calcolare la larghezza del viewport quando le diapositive vengono scambiate sulla skin, assicurandoci così che quando la larghezza dello schermo cambia improvvisamente, scorreremo alla diapositiva di cui abbiamo bisogno.

Dopo aver scritto la funzione, ora dobbiamo richiamarla dopo l'intervallo precedente di un'ora, possiamo anche salvare l'intervallo in memoria in modo da poterlo modificare in caso di necessità, ricordando un solo valore del codice:

L'ora js è indicata in millisecondi.

Ora scriviamo la seguente costruzione:

Qui non potrebbe essere tutto più semplice; attraverso la costruzione $(document).ready(function()()) parliamo di quelli che devono essere cancellati dopo che il documento è stato scaricato. Quindi chiamiamo semplicemente la funzione nextSlide con un intervallo uguale a slideInterval , con l'aggiunta della funzione setInterval.

Dopo tutte le azioni che abbiamo svolto finora, il nostro cursore dovrebbe girare miracolosamente, se qualcosa è andato storto per te, il problema potrebbe riguardare la versione di jQuery o la connessione errata di qualche file. Inoltre, non è necessario disattivarlo, poiché potresti aver commesso un errore nel codice, quindi posso semplicemente controllare di nuovo tutto.


Andiamo avanti e aggiungiamo una funzione al nostro slider, ad esempio una barra di scorrimento quando si passa il cursore, per la quale dobbiamo scrivere quanto segue nel blocco di codice principale (al centro del $(document).ready(function( ) ()) struttura:

Per iniziare ad analizzare questo codice, dobbiamo sapere cos'è switchinterval. Innanzitutto è importante salvare il click periodico della funzione nextSlide, semplicemente per aspetto possiamo utilizzare questa serie di codice: setInterval(nextSlide, slideInterval); , cambiato in Qiu: switchInterval = setInterval(nextSlide, slideInterval); . Dopo queste manipolazioni, il nostro blocco di codice principale assomiglia a questo:

Qui utilizzo il metodo hover, che significa “al passaggio del mouse”, questa funzione mi permette di rilevare il momento in cui passo il cursore su qualsiasi oggetto, in questa sezione del viewport.

Dopo aver passato il mouse, cancello l'intervallo che inserirò tra le braccia (questo è il nostro switchInterval ), quindi, attraverso il quale, scrivo che lavorerò se sposto il cursore indietro, in quale blocco do nuovamente al nostro switchInterval un clic periodico della funzione nextSlide.

Ora, come possiamo verificare, è importante il modo in cui il nostro cursore reagisce al passaggio del cursore, al goffo rimescolamento delle diapositive.

È giunto il momento di aggiungere pulsanti al nostro slider, inclusi i pulsanti avanti e indietro.

Notiamoli innanzitutto:

Questa marcatura potrebbe essere stupida all'inizio, dirò subito che racchiudendo questi due pulsanti in un div con la classe prev-next-btns solo per tua comodità, non devi disturbare nessuno, il risultato non sarà Non cambiare, ti diciamo subito che ho stili e tutto sarà chiaro:

Innanzitutto, posizioniamo i nostri pulsanti utilizzando position:absolute , in modo da poter controllare liberamente la loro posizione al centro del nostro viewport, quindi possiamo ridimensionare questi pulsanti e, utilizzando il border-radius, arrotondarli in modo che i pulsanti si trasformino in cerchi. Il loro colore sarà bianco, quindi #fff , e il loro aspetto sul bordo superiore del viewport sarà pari a metà dell'altezza del viewport meno metà dell'altezza del pulsante stesso (il mio aspetto è 25px), in questo modo possiamo espanderci verticalmente al centro. Successivamente diciamo che quando passiamo sopra di essi, il nostro cursore si trasformerà in un puntatore e, dicendo ai nostri pulsanti, questi dovranno sporgere dai bordi di 20px, in modo da poterli spostare come vogliamo.

Ripeto, puoi modellare gli elementi della pagina come preferisci, introdurrò anche l'esempio di questi stili, che scelgo di utilizzare come vikory.

Dopo lo styling, il nostro cursore potrebbe assomigliare a questo:


Successivamente, torniamo al nostro file js, dove descriveremo il robot dei nostri pulsanti. Bene, aggiungiamo un'altra funzione, che ci viene mostrata nella diapositiva anteriore:

Si chiama prevSlide, apparirà solo quando clicchi su prev-btn. Controlliamo prima quelle che si trovano sulla 1a diapositiva, qui controlliamo anche che la nostra slideNow non sia la migliore tra la gamma reale delle nostre diapositive e, come chiediamo, passiamo alla diapositiva rimanente posizionando lo slidewrapper secondo necessità a noi. I valori possono essere calcolati utilizzando la seguente formula: (larghezza di una diapositiva) * (per le diapositive – 1), prendiamo tutto con il segno meno, perché Lo spostiamo a sinistra, esci, in modo che il viewport ora ci mostri la diapositiva rimanente. Infine, dobbiamo anche dire a questo blocco di cambiare diapositivaOra che la nostra vista ora ha la diapositiva rimanente.

Se non siamo sulla prima diapositiva, dobbiamo tornare indietro di 1, per cui modifichiamo nuovamente il potere di trasformazione dello slidewrapper. La formula è la seguente: (larghezza di una diapositiva) * (numero della diapositiva di flusso - 2), prendiamo comunque il segno meno. Perché -2 e non -1 dobbiamo tornare indietro di 1 diapositiva? A destra, come sappiamo, diciamo, sulla 2a diapositiva, la potenza di transform:translate(x,0) del nostro slidewrapper è già uguale alla larghezza di una diapositiva, quindi possiamo dire che è necessario selezionare la numero della diapositiva del flusso 1 , quindi ne rimuoviamo di nuovo uno, poiché lo slidewrapper ha già offset lo slidewrapper, che dovrà essere offset di 0 anche per le larghezze del viewport stesso, e su slideNow - 2.

Ora non abbiamo più bisogno di aggiungere righe al blocco principale di codice:

Qui possiamo semplicemente vedere che quando clicchiamo sui nostri pulsanti, possiamo fare clic sulle funzioni di cui abbiamo bisogno, tutto è semplice e logico.

Ora che abbiamo aggiunto i pulsanti di navigazione delle diapositive, passiamo nuovamente al layout:

Infatti al centro del viewport c'è la lista degli allegati, io ho l'identificatore nav-btns, al centro ci sono i nostri pulsanti di navigazione, loro hanno la classe slide-nav-btn, poi tu può terminare l'attacco con un segno. Ecco gli stili:

Al blocco nav-btns, dove si trovano i nostri pulsanti, viene assegnata la posizione power:absolute in modo che non allunghi il viewport in altezza, perché Lo slidewrapper ha position:relative , la larghezza è impostata da noi al 100%, in modo che con l'aiuto di text-align:center centriamo i pulsanti orizzontalmente rispetto al viewport , quindi con l'aiuto del potere inferiore facciamo sapere al nostro blocco che il bordo inferiore è responsabile di trovarsi sul lato 20px.

I pulsanti sono gli stessi delle diapositive, tranne che ora li impostiamo su display: inline-block, perché con display:inline non rispondono a larghezza e altezza, perché trovarsi in un blocco posizionato in modo assoluto. Il colore è molto bianco e, oltre al già familiare raggio del bordo, gli conferisce la forma di un paletto. Quando passiamo sopra di essi, l'aspetto del nostro cursore può essere modificato per la visualizzazione.

E ora passiamo alla parte jQuery:
Per la prima volta, cambia il navBtnId, che salverà l'indice del pulsante che abbiamo premuto:

Qui, quando clicchiamo sulla nostra slide-nav-btn, clicchiamo su una funzione che prima assegna all'indice del pulsante cliccato una variabile navBtnId, che è un numero seriale, poiché parte da zero, poi premiamo un altro pulsante, quindi il valore viene scritto su navBtnId 1. Successivamente, ricontrolleremo, aggiungeremo uno al numero di serie del pulsante, per rimuovere tale numero, in modo che non sia da 0, ma da 1, lo equalizziamo numero con il numero della diapositiva del flusso, se vengono evitati, non lavoreremo con i loro processi, quindi la diapositiva richiesta è già nel viewport.

Se la diapositiva di cui abbiamo bisogno non è nel viewport, dobbiamo rompere lo slidewrapper a sinistra, quindi modificare il valore del potere di trasformazione CSS da tradurre (che a sua volta è impostato su pixel, 0). Siamo già stati messi in imbarazzo più di una volta, quindi non è colpa nostra. Infine, i valori della diapositiva del flusso vengono nuovamente salvati nella variabile slideNow e i valori possono essere calcolati aggiungendo uno all'indice del pulsante cliccato.

Quindi, comunque, tutto ciò che non è stato ancora capito, rimuoverò il post su jsfiddle, dove verrà riportato tutto il codice scritto nel materiale.

Grazie per il tuo rispetto!

Tag:

• dispositivo di scorrimento jquery
• css
• animazione css3
• html

Questo è uno slider tattile adattivo, scritto in jQuery. Il motore di questo plugin utilizza animazioni CSS3 e allo stesso tempo trasferisce i fallback per le versioni precedenti dei browser. Glide.js è semplice e facile da usare.

L'unico contenuto del plugin è jQuery, che dobbiamo includere per primo:

Sono inclusi gli stili di base.

Lanciamo la struttura html dello slider.

Lanciamo lo slider da aggiustamenti dopo aggiustamenti.

$(".slider").glide();

… o lo stiamo aggiustando da soli

$(".slider").glide(( riproduzione automatica: 5000, frecce: "corpo", nav: "corpo" )));

Elenco dei parametri disponibili:

Per l'API vikoristan, scrivi glide per cambiare.

Var glide = $(".slider").glide().data("api_glide");

I metodi API sono ora disponibili per te.

Glide.jump(3, console.log("Wooo!"));

• .current() - Trasforma il numero del lato corrente
• .play() - Avvia lo scorrimento automatico
• .pause() - Scorrimento automatico di Zupinity
• .next(callback) - Sposta il cursore in avanti
• .prev(callback) - Sposta indietro il cursore
• .jump(distanza, callback) - Passa alla diapositiva precedente
• .nav(target) - Collega la navigazione all'elemento del brano (ad esempio: "body", ".class", "#id")
• .arrows(target) - Collega le frecce a un singolo elemento (ad esempio: "body", ".class", "#id")