WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Sliders

Full Width Slider 2

— Add- On per WorldWideScripts.net

Iscriviti al nostro feed per rimanere sempre aggiornato!

Nuovo! Seguici come lo vuoi!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Larghezza piena Slider 2 è facile da usare jQuery cursore immagine ottimizzata per la larghezza a schermo intero.

Caratteristiche

- JQuery driven.
- Responsive design.
- Velocità di transizione regolabile.
- Presentazione automatica con pausa al passaggio del mouse.
- Compatibile con tutti i principali browser (IE8 e superiori, Chrome, Firefox, Safari e Opera)
- Può aggiungere Titolo, Descrizione e pulsante Link per ogni diapositiva.

Nuovi metodi:

addSlide - Adds slide to the slider 
start - Starts the slider
restart - Restart the slider
destroy - Remove the slider

Nuove opzioni:

 cs - Current slide; 0 - first, 1 - second etc... 
expandDuration - Initial height animation duration, milliseconds
linktext - Button Text
titleHTML - Custom HTML for the Title (ex. <h4>%title%</h4> )
descriptionHTML - Custom HTML for the Description (ex. <p>%desc%</p> )
linkHTML – Custom HTML for the link button (ex. <a href="%link%">%linktext%</a> )
beforeInit – Function to run before slider init
afterInit – Function to run after slider init
slideStart – Function to run on slide start, returns the slide object
slideEnd – Function to run on slide end, returns the slide object

Esempio con tutte le impostazioni:

 <script type = "text / javascript"> $ (document).ready (function () { // Crea nuova istanza di scorrimento var my_slider = $ ('. esempio') fws2 ().; // Impostazioni del cursore Set (opzionale) È possibile ignorare completamente questo blocco my_slider.settings ({ cs: 0, // diapositiva corrente; 0 - primo, 1 - secondo ecc... Durata: 750, // Durata pagina; millisecondi hoverpause: 1, // pausa al passaggio del mouse; 1 - Si, 0 - No pausa: 6000, // pausa prima di passare alla diapositiva successiva; millisecondi frecce: 1, // visualizzare le frecce; 1 - Si, 0 - No proiettili: 0, // visualizzazione proiettili; 1 - Si, 0 - No expandDuration: 750, // visualizzazione frecce; 1 - Si, 0 - No linktext: 'Per saperne di più', // Testo pulsante (impostazione globale) // Opzioni avanzate titleHTML: '<h4>% title% </ h4>', // HTML personalizzato per il titolo descriptionHTML: '<p>% desc% </ p>', // HTML personalizzato per la Descrizione linkHTML: '<a href="%link%">%% </a> linktext' // per il pulsante di collegamento, HTML personalizzato beforeInit: function () {}, // funzione da eseguire prima del cursore init afterInit: function () {} // Funzione per correre dietro cursore init slideStart: function (slide) {} // Funzione per eseguire all'avvio diapositiva, restituisce l'oggetto diapositiva slideEnd: function (slide) {} // Funzione per funzionare su fine diapositiva, restituisce l'oggetto diapositiva }); // Aggiunta di diapositive my_slider.addSlide ({ Immagine: 'img / slide_1.jpg', // fonte Immagine Titolo: 'Slide 1' //, Titolo Descrizione: 'Descrizione', // scorrevole Descrizione linktext: '', // Testo pulsante (opzionale, utilizzerà le impostazioni globali altrimenti) link: 'http: // sito web' // Read More link URL }); // Avvia il cursore my_slider.start (); }); </ script> 

Breve esempio, senza variabili, usando concatenazioni:

 <script type = "text / javascript"> $ (document).ready (function () { $ ('. esempio1') .fws2 ({proiettili: 1, frecce: 0}) .addSlide ({image: 'img / slide_1.jpg', titolo: 'Slide 1', descrizione: 'Descrizione', link: 'http: // sito web'}) .addSlide ({image: 'img / slide_2.jpg', titolo: 'Slide 2', descrizione: 'Descrizione', link: 'http: // sito web'}) .addSlide ({image: 'img / slide_3.jpg', titolo: 'Slide 3', descrizione: 'Descrizione', link: 'http: // sito web'}) .cominciare(); }); </ script> 

Esempio con funzione di callback

 <script type = "text / javascript"> $ (document).ready (function () { var example_slider = $ ('. esempio2') fws2 ().; example_slider.settings ({ afterInit: function () { alert ('Slider pronta!'); }, slideEnd: function (slide) { var title = slide.find ("titolo".) di testo (.); alert ('Questo e' + titolo); } }); example_slider.addSlide ({image: 'img / slide_1.jpg', titolo: 'Slide 1', descrizione: 'Descrizione', link: 'http: // sito web'}); example_slider.addSlide ({image: 'img / slide_2.jpg', titolo: 'Slide 2', descrizione: 'Descrizione', link: 'http: // sito web'}); example_slider.addSlide ({image: 'img / slide_3.jpg', titolo: 'Slide 3', descrizione: 'Descrizione', link: 'http: // sito web'}); example_slider.start (); }); </ script> 

Esempio personalizzazione HTML

 <script type = "text / javascript"> $ (document).ready (function () { var example_slider = $ ('. esempio4') fws2 ().; example_slider.settings ({ titleHTML: '<h1> <a href="%link%">% title% </a> </ h1>', descriptionHTML: '<p> <i class = "fa fa-check" /> <span>% desc% </ span> </ p>', linktext: 'Per saperne di più', linkHTML: '<a href="%link%">% linktext% circa% title% </a>' }); example_slider .addSlide ({image: 'img / slide_1.jpg', titolo: 'Slide 1', descrizione: 'Descrizione', link: 'http: // sito web'}) .addSlide ({image: 'img / slide_2.jpg', titolo: 'Slide 2', descrizione: 'Descrizione', link: 'http: // sito web'}) .addSlide ({image: 'img / slide_3.jpg', titolo: 'Slide 3', descrizione: 'Descrizione', link: 'http: // sito web'}) .cominciare(); }); </ script> 

Rimani aggiornato!

Seguici su Facebook o Twitter e riceverai le ultime notizie sugli aggiornamenti delle voci e le imminenti plugin e script!

Potete anche seguire noi su Instagram e presto su YouTube con video tutorial su come installare nostri plugin e script!

Changelog

8 dicembre 2015

- Codice Javascript è stato riscritto.
- Lo script imagesloaded.js è ora facoltativo.
- HTML è stato rimosso. Ora è completamente costruito dalla javascript.
- Link carattere Google viene rimosso dalla testa come si usa più.
- Slider è ora inizializzato utilizzando $ (selector).fws2 ();

- Nuovi metodi:

 addSlide - Adds slide to the slider 
start - Starts the slider
restart - Restart the slider
destroy - Remove the slider

- Nuove opzioni:

 cs - Current slide; 0 - first, 1 - second etc... 
expandDuration - Initial height animation duration, milliseconds
linktext - Button Text
titleHTML - Custom HTML for the Title (ex. <h4>%title%</h4> )
descriptionHTML - Custom HTML for the Description (ex. <p>%desc%</p> )
linkHTML – Custom HTML for the link button (ex. <a href="%link%">%linktext%</a> )
beforeInit – Function to run before slider init
afterInit – Function to run after slider init
slideStart – Function to run on slide start, returns the slide object
slideEnd – Function to run on slide end, returns the slide object

10 aprile 2014

- Slider ora supporta più istanze sulla pagina.
- Aggiunto proiettili navigazione.
- Freccia / Bullets navigazione può essere attivata / OFF ora.
- Opzione per disabilitare fermata Autoslide al passaggio del mouse Aggiunto.
- Slider ora utilizza font-impressionante invece di immagini per le frecce di navigazione e proiettili.
- Aggiunto tastiera sinistra / destra navigazione freccia.


Scarica
Altri componenti di questa categoriaTutti i componenti di questo autore
CommentiDomande frequenti e risposte

Proprietà

Creato:
16 nov 12

Ultimo aggiornamento:
8 dicembre 15

Alta risoluzione:

Browser compatibili:
IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

File inclusi:
JavaScript JS, HTML, CSS

Versione software:
jQuery

Parole chiave

eCommerce, eCommerce, Tutti gli articoli, completo, javascript, jquery, js, di risposta, cursore, presentazione, larghezza