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 la WorldWideScripts.net

Aboneaza-te la feed-ul nostru pentru a rămâne până la data!

Nou! Urmați- ne cum vrei!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Latime Slider 2 este ușor de utilizat jQuery imagine slider optimizat pentru lățime ecran complet.

caracteristici

- JQuery condus.
- Proiectare receptiv.
- Viteza de tranziție reglabilă.
- Prezentarea automată cu pauză pe hover.
- Compatibil cu toate browserele importante (IE8 și de mai sus, Chrome, Firefox, Safari și Opera)
- Se poate adăuga titlu, descriere și butonul Link la fiecare diapozitiv.

Noi metode:

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

Noi opțiuni:

 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

Exemplul cu toate setările:

 <script type = "text / javascript"> $ (Document).ready (function () { // Creare exemplu slider var my_slider = $ ('. de exemplu ") fws2 ().; // Setări slider Set (facultativ) Puteți ignora complet acest bloc my_slider.settings ({ cs: 0, // diapozitivul curent; 0 - în primul rând, 1 - al doilea, etc... Durata: 750, // durata Slide; milisecunde hoverpause: 1, // Pauză pe hover; 1 - Da, 0 - Nu pauză: 6000, // Pauză înainte de a merge la diapozitiv următor; milisecunde săgeți: 1, // Arată săgeți; 1 - Da, 0 - Nu gloanțe: 0, // Arată gloanțe; 1 - Da, 0 - Nu expandDuration: 750, // Arată săgeți; 1 - Da, 0 - Nu linktext: "Citește mai mult", // Button Text (setare Global) // Opțiuni avansate titleHTML: "<h4>% Titlu% </ h4> ', // personalizat HTML pentru titlu descriptionHTML: '<p>% desc% </ p> ", // HTML personalizat pentru descrierea linkHTML: "<a href="%link%">% linktext% </a>", // pentru butonul link personalizat HTML beforeInit: function () {}, // Functia pentru a rula înainte de slider de inițializare afterInit: function () {}, // Functia pentru a rula după slider de inițializare slideStart: Funcția (slide) {}, // Functia pentru a rula pe Start diapozitiv, returnează obiectul de diapozitive slideEnd: Funcția (slide) {} // Functia pentru a rula pe final diapozitiv, returnează obiectul de diapozitive }); // Adaugarea de diapozitive my_slider.addSlide ({ imagine: "img / slide_1.jpg", // Image source titlu: "Slide 1 ', // titlul Descriere: "Descriere", // Slide Descriere linktext: '', // Button Text (Opțional, se va utiliza setările globale altfel) link: "http: // site-ul" // Citeste mai mult link URL }); // Start cursorul my_slider.start (); }); </ script> 

Scurt exemplu fără variabilă, folosind înlănțuirea:

 <script type = "text / javascript"> $ (Document).ready (function () { $ ('. example1 ") .fws2 ({gloanțe: 1, săgeți: 0}) .addSlide ({imagine: "img / slide_1.jpg", titlu: "Slide 1 ', descriere:" Descriere ", link-ul:" http: // site-ul "}) .addSlide ({imagine: "img / slide_2.jpg", titlu: "Slide 2", descriere: "Descriere", link-ul: "http: // site-ul"}) .addSlide ({imagine: "img / slide_3.jpg", titlu: "Slide 3 ', descriere:" Descriere ", link-ul:" http: // site-ul "}) .început(); }); </ script> 

Exemplu, folosind funcție de apel invers

 <script type = "text / javascript"> $ (Document).ready (function () { var example_slider = $ ('. Exemplul 2 ") fws2 ().; example_slider.settings ({ afterInit: function () { alert ("Slider gata!"); }, slideEnd: Funcția (slide) { var title = slide.find ("titlu.") text ().; alert ('Acesta este "+ titlu); } }); example_slider.addSlide ({imagine: "img / slide_1.jpg", titlu: "Slide 1 ', descriere:" Descriere ", link-ul:" http: // site-ul "}); example_slider.addSlide ({imagine: "img / slide_2.jpg", titlu: "Slide 2", descriere: "Descriere", link-ul: "http: // site-ul"}); example_slider.addSlide ({imagine: "img / slide_3.jpg", titlu: "Slide 3 ', descriere:" Descriere ", link-ul:" http: // site-ul "}); example_slider.start (); }); </ script> 

Exemplul personalizarea HTML

 <script type = "text / javascript"> $ (Document).ready (function () { var example_slider = $ ('. Exemplul 4. ") fws2 ().; example_slider.settings ({ titleHTML: "<h1> <a href="%link%">% titlu% </a> </ h1> ', descriptionHTML: '<p> <i class = "fa fa-verifica" /> <span>% desc% </ span> </ p> ", linktext: "Citește mai mult", linkHTML: "<a href="%link%">% linktext% aproximativ% titlu% </a> ' }); example_slider .addSlide ({imagine: "img / slide_1.jpg", titlu: "Slide 1 ', descriere:" Descriere ", link-ul:" http: // site-ul "}) .addSlide ({imagine: "img / slide_2.jpg", titlu: "Slide 2", descriere: "Descriere", link-ul: "http: // site-ul"}) .addSlide ({imagine: "img / slide_3.jpg", titlu: "Slide 3 ', descriere:" Descriere ", link-ul:" http: // site-ul "}) .început(); }); </ script> 

Fiți la curent!

Urmați-ne pe Facebook sau Twitter și obține cele mai recente știri despre actualizările de elemente și plugin-uri și script-uri viitoare!

De asemenea, puteți urmări ne pe Instagram și în curând pe YouTube cu tutoriale video despre cum să instalați plugin-uri și script-uri noastre!

Changelog

Opt/12/2015

- Cod JavaScript a fost rescris.
- Script imagesloaded.js este acum opțională.
- HTML a fost eliminat. În prezent, este construit complet din JavaScript.
- Link font Google este eliminat din cap ca nu mai este utilizat.
- Slider este acum inițializată folosind $ (selector).fws2 ();

- Metode noi:

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

- Noi optiuni:

 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 apr 2014

- Slider suportă acum mai multe instanțe pe pagina.
- Adaugat de navigare gloanțe.
- Arrow / Marcatori de navigare poate fi pornit / oprit acum.
- Opțiune pentru a dezactiva oprirea autoslide pe mouseover adaugarii.
- Slider foloseste acum font minunat loc de imagini pentru a săgețile de navigare și gloanțe.
- Tastatura Adaugat stânga / dreapta săgeată de navigare.


Descărcați
Alte componente din această categorieToate componentele acestui autor
ComentariiÎntrebări frecvente și răspunsuri

Proprietăți

Creată:
16 nov de 12

Ultima actualizare:
08 dec 15

Rezoluție înaltă:
da

Browsere compatibile:
IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Fișiere incluse:
JavaScript JS, HTML, CSS

Versiune software:
jQuery

Cuvinte cheie

eCommerce, eCommerce, Toate obiectele, deplin, javascript, jquery, js, sensibil, cursor, slideshow, lăţime