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

Prenumerera på vårt foder för att hålla dig uppdaterad!

Nytt! Följ oss som du vill ha det!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Full bredd Slider 2 är lätt att använda jQuery bild reglaget optimerad för full skärmbredd.

Funktioner

- JQuery driven.
- Responsiv design.
- Justerbar övergångshastighet.
- Auto bildspel med paus på hover.
- Kompatibel med alla större webbläsare (IE8 och ovan, Chrome, Firefox, Safari och Opera)
- Kan lägga titel, beskrivning och länk för att varje bild.

Nya metoder:

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

Nya alternativ:

 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

Exempel med alla inställningar:

 <script type = "text / javascript"> $ (dokument).ready (function () { // Skapa nytt reglaget instans var my_slider = $ ('. exempel) fws2 (). // Ange inställningar reglaget (tillval) Du kan helt ignorera detta block my_slider.settings ({ cs: 0, // aktuella bilden; 0 - För det första en - sekund etc... Längd: 750, // Slide duration; millisekunder hoverpause: 1, // Paus på hover; 1 - Ja, 0 - Nej paus: 6000, // paus innan gå till nästa bild; millisekunder pilar: 1, // Display pilar; 1 - Ja, 0 - Nej kulor: 0, // Display kulor; 1 - Ja, 0 - Nej expandDuration: 750, // Display pilar; 1 - Ja, 0 - Nej linktext: "Läs mer", // knapptext (Global inställning) // Avancerade alternativ titleHTML: "<h4>% titel% </ h4> ', // Custom HTML för avdelning descriptionHTML: "<p>% fallande% </ p>", // Custom HTML för Beskrivning linkHTML: "<a href="%link%">% Text% </a>", // Custom HTML för länkknappen beforeInit: function () {} // Funktion för att köra innan reglaget init afterInit: function () {} // Funktion för att springa efter reglaget init slideStart: function (slide) {} // Funktion för att köras på bild start återgår bildobjekt slideEnd: function (slide) {} // Funktion för att köras på bild slut återgår glid objektet }); // Lägga slid my_slider.addSlide ({ bild: "img / slide_1.jpg ', // Bildkälla titel: "Slide 1 ', // Titel beskrivning: "Beskrivning", // Slide Beskrivning linktext: '', // knapptext (tillval, kommer att använda globala inställningar på annat sätt) link: "http: // webbplats" // Läs mer URL-länk }); // Start reglaget my_slider.start (); }); </ script> 

Kort exempel utan variabel, använder kedja:

 <script type = "text / javascript"> $ (dokument).ready (function () { $ ('. example1') .fws2 ({kulor: 1, pilar: 0}) .addSlide ({bild: "img / slide_1.jpg ', titel:" Slide 1', beskrivning: "Beskrivning", länk: "http: // webbplats"}) .addSlide ({bild: "img / slide_2.jpg ', titel:" Slide 2', beskrivning: "Beskrivning", länk: "http: // webbplats"}) .addSlide ({bild: "img / slide_3.jpg ', titel:" Slide 3', beskrivning: "Beskrivning", länk: "http: // webbplats"}) .start(); }); </ script> 

Exempel användning av callback-funktion

 <script type = "text / javascript"> $ (dokument).ready (function () { var example_slider = $ ('. exempel2') fws2 (.); example_slider.settings ({ afterInit: function () { alert ("Slider redo!"); }, slideEnd: function (slide) { var title = slide.find ("titel.") text (). alert ("Detta är" + titel); } }); example_slider.addSlide ({bild: "img / slide_1.jpg ', titel:" Slide 1', beskrivning: "Beskrivning", länk: "http: // webbplats"}); example_slider.addSlide ({bild: "img / slide_2.jpg ', titel:" Slide 2', beskrivning: "Beskrivning", länk: "http: // webbplats"}); example_slider.addSlide ({bild: "img / slide_3.jpg ', titel:" Slide 3', beskrivning: "Beskrivning", länk: "http: // webbplats"}); example_slider.start (); }); </ script> 

Exempel anpassa HTML

 <script type = "text / javascript"> $ (dokument).ready (function () { var example_slider = $ ('. example4') fws2 (.); example_slider.settings ({ titleHTML: "<h1> <a href="%link%">% title% </a> </ h1> ', descriptionHTML: "<p> <i class =" fa fa-check "/> <span>% fallande% </ span> </ p>", linktext: "Läs mer", linkHTML: "<a href="%link%">% Text% om% title% </a>" }); example_slider .addSlide ({bild: "img / slide_1.jpg ', titel:" Slide 1', beskrivning: "Beskrivning", länk: "http: // webbplats"}) .addSlide ({bild: "img / slide_2.jpg ', titel:" Slide 2', beskrivning: "Beskrivning", länk: "http: // webbplats"}) .addSlide ({bild: "img / slide_3.jpg ', titel:" Slide 3', beskrivning: "Beskrivning", länk: "http: // webbplats"}) .start(); }); </ script> 

Håll dig uppdaterad!

Följ oss på Facebook eller Twitter och få senaste nytt om artikel uppdateringar och kommande plugins och manus!

Du kan också följa oss på Instagram och snart på YouTube med video tutorials om hur du installerar våra plugins och manus!

Ändringslogg

December 8, 2015

- Javascript-kod har skrivits om.
- Imagesloaded.js manus är nu frivilligt.
- HTML har tagits bort. Det är nu helt bygga från javascript.
- Google font Länken tas bort från huvudet, eftersom det inte längre används.
- Slider nu initieras genom att använda $ (väljare).fws2 ();

- Nya metoder:

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

- Nya alternativ:

 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

April 10, 2014

- Slider stöder nu flera förekomster på sidan.
- Inkom kulor navigation.
- Arrow / Bullets navigering kan slås PÅ / AV nu.
- Lade till möjligheten att inaktivera autoslide stopp på mouseover.
- Slider använder nu font-awesome istället för bilder för navigationspilarna och kulor.
- Inkom tangentbordet vänster / högerpilen navigering.


Hämta
Andra komponenter i denna kategoriAlla komponenter i denna författare
KommentarerVanliga frågor och svar

Egenskaper

Skapad:
16 November 12

Senaste uppdateringen:
8 December 15

Hög upplösning:
Ja

Kompatibla webbläsare:
IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Filer Ingår:
JavaScript JS, HTML, CSS

Programvaruversion:
jQuery

Nyckelord

e-handel, e-handel, Alla objekt, full, JavaScript, jQuery, js, kä, nslig, lö, paren, bildspel, bredd