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

Abonner på vores feed for at holde dig ajour !

Nyt! Følg os som du ønsker det!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Fuld bredde Slider 2 er nem at bruge jQuery billede skyderen optimeret til fuld skærm bredde.

Egenskaber

- JQuery drevet.
- Responsive design.
- Justerbar overgang hastighed.
- Automatisk slideshow med pause på hover.
- Kompatibel med alle større browsere (IE8 og derover, Chrome, Firefox, Safari og Opera)
- Kan tilføje Titel, Beskrivelse og Link-knappen for at hvert dias.

Nye metoder:

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

Nye muligheder:

 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

Eksempel med alle indstillinger:

 <script type = "text / javascript"> $ (dokument).ready (function () { // Opret ny skyder instans Var my_slider = $ ('. eksempel «) fws2 (.); // Sæt skyderen indstillinger (valgfrit) Du kan helt ignorere denne blok my_slider.settings ({ cs: 0, // aktuelle dias; 0 - først, 1 - anden osv... varighed: 750, // Slide varighed; millisekunder hoverpause: 1, // Pause på hover; 1 - Ja, 0 - Nej pause: 6000, // Pause før gå til næste dias; millisekunder pile: 1, // Display pile; 1 - Ja, 0 - Nej kugler: 0, // Display kugler; 1 - Ja, 0 - Nej expandDuration: 750, // Display pile; 1 - Ja, 0 - Nej linktext: 'Læs mere', // Button Tekst (Global indstilling) // Avancerede indstillinger titleHTML: '<h4>% title% </ h4>', // Brugerdefineret HTML til titlen descriptionHTML: "<p>% desc% </ p> ', // Brugerdefineret HTML til beskrivelse linkHTML: '<a href="%link%">% linktext% </a> «, // Brugerdefineret HTML for linket knappen beforeInit: function () {}, // Funktion til at køre før skyderen init afterInit: function () {}, // Funktion til at løbe efter skyderen init slideStart: funktion (slide) {}, // Funktion til at køre på dias start, returnerer slide objekt slideEnd: funktion (slide) {} // Funktion til at køre på dias ende, returnerer slide objekt }); // Tilføjelse slide my_slider.addSlide ({ billede: 'img / slide_1.jpg «, // billede kilde titel: »Slide 1 ', // Titel beskrivelse: »Beskrivelse«, // Slide Beskrivelse linktext: '', // Button Tekst (valgfri, vil bruge de globale indstillinger på anden måde) link: "http: // hjemmesiden '// Læs mere URL-link }); // Start skyderen my_slider.start (); }); </ script> 

Kort eksempel uden variabel, ved hjælp af kæde:

 <script type = "text / javascript"> $ (dokument).ready (function () { $ ('. Eksempel 1) .fws2 ({bullets: 1, pile: 0}) .addSlide ({billede: 'img / slide_1.jpg «, titel:' Slide 1 ', beskrivelse:» Beskrivelse «, link:' http: // hjemmesiden '}) .addSlide ({billede: 'img / slide_2.jpg «, titel:' Slide 2 ', beskrivelse:» Beskrivelse «, link:' http: // hjemmesiden '}) .addSlide ({billede: 'img / slide_3.jpg «, titel:' Slide 3 ', beskrivelse:» Beskrivelse «, link:' http: // hjemmesiden '}) .starte(); }); </ script> 

Eksempel hjælp callback funktion

 <script type = "text / javascript"> $ (dokument).ready (function () { Var example_slider = $ ('. Eksempel 2 ") fws2 (.); example_slider.settings ({ afterInit: function () { alert ('Slider klar!'); }, slideEnd: funktion (slide) { Var title = slide.find ("title".) tekst (.); alert ("Dette er '+ titel); } }); example_slider.addSlide ({billede: 'img / slide_1.jpg «, titel:' Slide 1 ', beskrivelse:» Beskrivelse «, link:' http: // hjemmesiden '}); example_slider.addSlide ({billede: 'img / slide_2.jpg «, titel:' Slide 2 ', beskrivelse:» Beskrivelse «, link:' http: // hjemmesiden '}); example_slider.addSlide ({billede: 'img / slide_3.jpg «, titel:' Slide 3 ', beskrivelse:» Beskrivelse «, link:' http: // hjemmesiden '}); example_slider.start (); }); </ script> 

Eksempel tilpasse HTML

 <script type = "text / javascript"> $ (dokument).ready (function () { Var example_slider = $ ('. Eksempel 4 «) fws2 (.); example_slider.settings ({ titleHTML: "<h1> <a href="%link%">% title% </a> </ h1> ', descriptionHTML: "<p> <i class =" fa fa-check "/> <span>% desc% </ span> </ p> ', linktext: 'Læs mere', linkHTML: '<a href="%link%">% linktext% om% title% </a>' }); example_slider .addSlide ({billede: 'img / slide_1.jpg «, titel:' Slide 1 ', beskrivelse:» Beskrivelse «, link:' http: // hjemmesiden '}) .addSlide ({billede: 'img / slide_2.jpg «, titel:' Slide 2 ', beskrivelse:» Beskrivelse «, link:' http: // hjemmesiden '}) .addSlide ({billede: 'img / slide_3.jpg «, titel:' Slide 3 ', beskrivelse:» Beskrivelse «, link:' http: // hjemmesiden '}) .starte(); }); </ script> 

Hold dig opdateret!

Følg os på Facebook eller Twitter og få seneste nyheder om post opdateringer og kommende plugins og scripts!

Du kan også følge os på Instagram og snart YouTube med video tutorials om hvordan du installerer vores plugins og scripts!

Changelog

December 8, 2015

- Javascript kode er blevet omskrevet.
- Imagesloaded.js script er nu valgfri.
- HTML er fjernet. Det er nu helt bygge fra javascript.
- Google font linket fjernes fra hovedet, da det ikke længere anvendes.
- Slider er nu initialiseret ved hjælp af $ (vælgeren).fws2 ();

- Nye Metoder:

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

- Nye muligheder:

 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 understøtter nu flere forekomster på siden.
- Tilføjet kugler navigation.
- Arrow / Bullets navigation kan slås TIL / FRA nu.
- Tilføjet mulighed for at deaktivere Autoslide stop på mouseover.
- Slider bruger nu font-fantastisk i stedet for billeder til navigationspilene og kugler.
- Tilføjet tastatur venstre / højre pil navigation.


Hent
Andre komponenter i denne kategoriAlle komponenter i denne forfatter
KommentarerOfte stillede spørgsmål og svar

Egenskaber

Oprettet:
16 november 12

Sidste ændring:
8 december 15

Høj opløsning:
Ja

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

Filer Inkluderet:
JavaScript JS, HTML, CSS

Software Version:
jQuery

Søgeord

eCommerce, eCommerce, Alle emner, fuld, javascript, jquery, js, lydhø, r, skyderen, slideshow, bredde