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

— Lisäosa WorldWideScripts.net

Tilaa syötteen pysymään ajan tasalla!

Uusi! Seuraa meitä kuin haluat!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Täysi Leveys Slider 2 on helppokäyttöinen jQuery kuva liukusäädintä optimoitu koko näytön leveyden.

ominaisuudet

- JQuery odotuksiin.
- Responsive suunnittelu.
- Säädettävä siirtymisen nopeus.
- Automaattinen diaesitys pause hääriä.
- Yhteensopiva kaikkien suurten selainten (IE8 ja edellä, Chrome, Firefox, Safari ja Opera)
- Voi lisätä otsikko, kuvaus ja linkki -painiketta kunkin dian.

Uudet menetelmät:

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

Uusia vaihtoehtoja:

 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

Esimerkiksi kaikki asetukset:

 <Script type = "text / javascript"> $ (Document).ready (toiminto () { // Luo uusi liukusäädintä esimerkiksi var my_slider = $ ('. esimerkki). fws2 (); // Aseta liukusäädintä asetukset (lisävaruste) Voit täysin sivuuttaa tämän lohkon my_slider.settings ({ cs: 0, // Nykyinen dia; 0 - ensimmäinen, 1 - toinen jne... kesto: 750, // Slide kesto; millisekuntia hoverpause: 1, // Keskeytä hääriä; 1 - Kyllä, 0 - Ei Tauko: 6000, // Tauko ennen siirry seuraavaan dia; millisekuntia nuolet: 1, // Näytön nuolet; 1 - Kyllä, 0 - Ei luoteja: 0, // Näyttö luodit; 1 - Kyllä, 0 - Ei expandDuration: 750, // Näytön nuolet; 1 - Kyllä, 0 - Ei linktext: "Lue lisää", // Button Teksti (Global-asetus) // Edistyneet asetukset titleHTML: '<h4>% title% </ h4>', // Custom HTML Otsikko descriptionHTML: '<p>% laskeva% </ p>', // Custom HTML Kuvaus linkHTML: '<a href="%link%">% linktext% </a> ", // Custom HTML linkki -painiketta beforeInit: toiminto () {}, // toiminto juosta ennen liukusäädintä init afterInit: toiminto () {}, // toiminto juosta jälkeen liukusäädintä init slideStart: toiminto (liukumäki) {}, // Toiminto ajaa slide alku, palauttaa dia esine slideEnd: toiminto (liukumäki) {} // Toiminto ajaa dia loppuun, palauttaa luistin esine }); // Lisääminen dia my_slider.addSlide ({ kuva: "img / slide_1.jpg", // Kuvan lähde otsikko: "Slide 1 ', // Otsikko Kuvaus: "Kuvaus", // Slide Kuvaus linktext: '', // Button Teksti (valinnainen, käyttää yleiset asetukset muuten) linkki: "http: // website" // Lue lisää URL-linkki }); // Aloita liukusäädintä my_slider.start (); }); </ Script> 

Lyhyt esimerkki ilman muuttuja käyttäen ketjutus:

 <Script type = "text / javascript"> $ (Document).ready (toiminto () { $ ('. Esimerkki 1) .fws2 ({luoteja: 1, nuolet: 0}) .addSlide ({kuva: "img / slide_1.jpg", otsikko: "Slide 1 ', kuvaus:" Kuvaus ", linkki: http: // verkkosivustolla"}) .addSlide ({kuva: "img / slide_2.jpg", otsikko: "Slide 2 ', kuvaus:" Kuvaus ", linkki: http: // verkkosivustolla"}) .addSlide ({kuva: "img / slide_3.jpg", otsikko: "Slide 3 ', kuvaus:" Kuvaus ", linkki: http: // verkkosivustolla"}) .start (); }); </ Script> 

Esimerkiksi käyttämällä soittopyyntö toiminto

 <Script type = "text / javascript"> $ (Document).ready (toiminto () { var example_slider = $ ('. Esimerkki 2). fws2 (); example_slider.settings ({ afterInit: toiminto () { alert ('Slider valmis! "); }, slideEnd: toiminto (liukumäki) { var title = slide.find (". otsikko"). tekstiä (); alert ('Tämä on' + otsikko); } }); example_slider.addSlide ({kuva: "img / slide_1.jpg", otsikko: "Slide 1 ', kuvaus:" Kuvaus ", linkki: http: // website"}); example_slider.addSlide ({kuva: "img / slide_2.jpg", otsikko: "Slide 2 ', kuvaus:" Kuvaus ", linkki: http: // website"}); example_slider.addSlide ({kuva: "img / slide_3.jpg", otsikko: "Slide 3 ', kuvaus:" Kuvaus ", linkki: http: // website"}); example_slider.start (); }); </ Script> 

Esimerkki räätälöintiä HTML

 <Script type = "text / javascript"> $ (Document).ready (toiminto () { var example_slider = $ ('. example4 "). fws2 (); example_slider.settings ({ titleHTML: '<h1> <a href="%link%">% title% </a> </ h1>', descriptionHTML: '<p> <i class = "fa fa-check" /> <span>% laskeva% </ span> </ p> ", linktext: "Lue lisää", linkHTML: '<a href="%link%">% linktext% noin% title% </a> " }); example_slider .addSlide ({kuva: "img / slide_1.jpg", otsikko: "Slide 1 ', kuvaus:" Kuvaus ", linkki: http: // verkkosivustolla"}) .addSlide ({kuva: "img / slide_2.jpg", otsikko: "Slide 2 ', kuvaus:" Kuvaus ", linkki: http: // verkkosivustolla"}) .addSlide ({kuva: "img / slide_3.jpg", otsikko: "Slide 3 ', kuvaus:" Kuvaus ", linkki: http: // verkkosivustolla"}) .start (); }); </ Script> 

Pysy ajan tasalla!

Seuraa meitä Facebookissa tai Twitterissä ja saada viimeisimmät uutiset kohde päivittää ja tulevista plugins ja skriptit!

Voit myös seurata meitä Instagram ja pian YouTubessa video tutorials asentamisesta meidän plugins ja skriptit!

Changelog

08 joulukuu 2015

- Javascript-koodi on kirjoitettu uudelleen.
- Imagesloaded.js käsikirjoitus on nyt valinnainen.
- HTML-on poistettu. Se on nyt täysin rakentaa siitä javascript.
- Google font linkki poistetaan pään se ei enää käytetä.
- Slider on nyt alustetaan käyttämällä $ (valitsin).fws2 ();

- Uudet menetelmät:

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

- Uusia vaihtoehtoja:

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

- Slider tukee nyt useita esiintymiä sivulla.
- Lisätty luoteja navigointi.
- Arrow / Bullets navigointi voidaan kytkeä päälle / pois nyt.
- Lisätty mahdollisuus poistaa autoslide pysähtyä mouseover.
- Slider nyt käyttää font-mahtava sijasta kuvia nuolia ja luoteja.
- Lisätty näppäimistö vasen / oikeaa nuolta navigointi.


Lataa
Muut komponentit tässä luokassaKaikki osat tämän tekijän
KommentitUsein kysyttyjä kysymyksiä ja vastauksia

Ominaisuudet

Luotu:
16 marraskuu 12

Viimeisin päivitys:
08 joulukuu 15

Korkea resoluutio:
Kyllä

Yhteensopiva Selaimet:
IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Tiedostoja mukana:
JavaScript JS, HTML, CSS

Ohjelmistoversio:
jQuery

Avainsanoja

eCommerce, eCommerce, Kaikki tuotteet, koko, javascript, jQuery, js, herkkä, liukusä, ä, dintä, diaesitys, leveys