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å vårt feed for å holde deg oppdatert!

Nyhet! Følg oss som du vil ha det!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Full Bredde Slider 2 er enkel å bruke jQuery image glidebryteren optimalisert for hele skjermbredden.

Spesifikasjoner

- JQuery drevet.
- Responsive design.
- Justerbar overgang hastighet.
- Auto slideshow med pause på hover.
- Kompatibel med alle de store nettleserne (IE8 og nyere, Chrome, Firefox, Safari og Opera)
- Kan legge til tittel, beskrivelse og Link-knappen for å hvert lysbilde.

Nye metoder:

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

Nye alternativer:

 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 innstillinger:

 <script type = "text / javascript"> $ (document).ready (function () { // Opprett ny slider eksempel Var my_slider = $ ('. eksempel') fws2 (.); // Sett innstillingene glidebryteren (valgfritt) Du kan fullstendig ignorere denne blokken my_slider.settings ({ cs: 0, // Gjeldende lysbilde; 0 - først, en - andre osv... varighet: 750, // Slide varighet; millisekunder hoverpause: 1, // Pause på hover; 1 - Ja, 0 - Nei pause: 6000, // Pause før gå til neste lysbilde; millisekunder piler: 1, // Skjerm piler; 1 - Ja, 0 - Nei kuler: 0, // Skjerm kuler; 1 - Ja, 0 - Nei expandDuration: 750, // Skjerm piler; 1 - Ja, 0 - Nei linktext: 'Les mer', // knappetekst (Global innstilling) // Avanserte alternativer titleHTML: '<h4>% title% </ h4>', // Custom HTML for tittel descriptionHTML: '<p>% synkende% </ p>', // Custom HTML for beskrivelse linkHTML: "<a href="%link%">% linktext% </a> ', // Custom HTML for koblingen knappen beforeInit: function () {} // Funksjon for å kjøre før slider init afterInit: function () {} // Funksjon for å løpe etter slider init slideStart: function (lysbilde) {} // Funksjon for å kjøre på lysbildet start, returnerer raset objekt slideEnd: function (lysbilde) {} // Funksjon for å kjøre på lysbildet slutten, returnerer raset objekt }); // Legge lysbilde my_slider.addSlide ({ image: 'img / slide_1.jpg', // bilde kilde tittel: "Slide 1 ', // Tittel beskrivelse: "Beskrivelse", // Slide Beskrivelse linktext: '', // knappetekst (valgfritt, vil bruke de globale innstillingene ellers) link: http: // nettside '// Les mer URL-link }); // Start glidebryteren my_slider.start (); }); </ script> 

Kort eksempel uten variabel, bruker kjeding:

 <script type = "text / javascript"> $ (document).ready (function () { $ ('. mittnavn1') .fws2 ({kuler: 1, piler: 0}) .addSlide ({image: 'img / slide_1.jpg', title: "Slide 1 ', beskrivelse:" Beskrivelse ", link: http: // nettside'}) .addSlide ({image: 'img / slide_2.jpg', title: 'Slide 2', beskrivelse: "Beskrivelse", link: http: // nettside '}) .addSlide ({image: 'img / slide_3.jpg', title: "Slide 3 ', beskrivelse:" Beskrivelse ", link: http: // nettside'}) .begynne(); }); </ script> 

Eksempel med tilbakeringingsfunksjonen

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

Eksempel tilpasse HTML

 <script type = "text / javascript"> $ (document).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-sjekk" /> <span>% synkende% </ span> </ p>', linktext: 'Les mer', linkHTML: "<a href="%link%">% linktext% om% title% </a> ' }); example_slider .addSlide ({image: 'img / slide_1.jpg', title: "Slide 1 ', beskrivelse:" Beskrivelse ", link: http: // nettside'}) .addSlide ({image: 'img / slide_2.jpg', title: 'Slide 2', beskrivelse: "Beskrivelse", link: http: // nettside '}) .addSlide ({image: 'img / slide_3.jpg', title: "Slide 3 ', beskrivelse:" Beskrivelse ", link: http: // nettside'}) .begynne(); }); </ script> 

Hold deg oppdatert!

Følg oss på Facebook eller Twitter og få siste nytt om vareoppdateringer og kommende plugins og scripts!

Du kan også følge oss på Instagram og snart på YouTube med video tutorials på hvordan du installerer våre plugins og scripts!

Changelog

8 desember 2015

- Javascript-kode har blitt omskrevet.
- Imagesloaded.js script er nå valgfritt.
- HTML er fjernet. Det er nå helt bygge fra javascript.
- Font lenke Google er fjernet fra hodet så det er ikke lenger brukes.
- Slider er nå klargjort ved hjelp av $ (velger).fws2 ();

- Nye metoder:

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

- Nye alternativer:

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

- Slider støtter nå flere forekomster på siden.
- Lagt kuler navigasjon.
- Arrow / Bullets navigasjon kan slås ON / OFF nå.
- Lagt til muligheten til å deaktivere autoslide stopp på mouse.
- Slider nå bruker font-awesome stedet for bilder for navigasjonspilene og kuler.
- Lagt tastatur venstre / høyre pil navigasjon.


Laste ned
Andre komponenter i denne kategorienAlle komponenter av denne forfatteren
KommentarerOfte stilte spørsmål og svar

Egenskaper

Laget:
16 november 12

Siste oppdatering:
8 desember 15

Høy oppløsning:
Ja

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

Filer Inkludert:
Javascript JS, HTML, CSS

Programvareversjon:
jQuery

Søkeord

eCommerce, eCommerce, Alle artikler, full, javascript, jquery, js, mottakelig, slider, slideshow, bredde