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

Abonneer u op onze feed om de hoogte te blijven!

Nieuw! Volg ons als u het wilt!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Volledige breedte Slider 2 is eenvoudig te jQuery image slider geoptimaliseerd voor de volledige breedte van het scherm te gebruiken.

Kenmerken

- JQuery gedreven.
- Reagerend ontwerp.
- Verstelbare overgang snelheid.
- Auto slideshow met pauze bij aanwijzen.
- Compatibel met alle gangbare browsers (IE8 en hoger, Chrome, Firefox, Safari en Opera)
- Kan toe te voegen titel, beschrijving en Link knop om elke dia.

Nieuwe methoden:

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

Nieuwe opties:

 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

Bijvoorbeeld met alle instellingen:

 <script type = "text / javascript"> $ (document).ready (function () { // Maak een nieuwe slider instantie var my_slider = $ ('. Bijvoorbeeld') fws2 ().; // Stel schuifknop instellingen (optioneel) kunt u volledig negeren dit blok my_slider.settings ({ cs: 0, // Huidige dia; 0 - de eerste, 1 - tweede etc... duur: 750, // Slide duur; milliseconden hoverpause: 1, // pauze bij aanwijzen; 1 - Ja, 0 - Nee pauzeren: 6000, // pauze voordat naar de volgende dia; milliseconden pijlen: 1, // pijlen Display; 1 - Ja, 0 - Nee kogels: 0, // Weergave kogels; 1 - Ja, 0 - Nee expandDuration: 750, // pijlen Display; 1 - Ja, 0 - Nee LinkText: 'Lees meer', // Knoptekst (Global instelling) // Geavanceerde mogelijkheden titleHTML: '<h4>% title% </ h4>', // Aangepaste HTML voor de titel descriptionHTML: '<p>% desc% </ p>', // Aangepaste HTML voor de Omschrijving linkHTML: '<a href="%link%">% LinkText% </a>', // Aangepaste HTML voor de link-knop beforeInit: function () {} // functie om te draaien voordat slider init afterInit: function () {} // functie te lopen na slider init slideStart: function (slide) {} // functie om te draaien op dia start, geeft de slide object slideEnd: function (slide) {} // functie om te draaien op het einde dia, de dia object terug }); // Dia toevoegen my_slider.addSlide ({ image: 'img / slide_1.jpg', // bron van het beeld Titel: "Slide 1 ', // Titel Beschrijving: 'Beschrijving', // Slide Beschrijving LinkText: '', // Knoptekst (Optioneel, zal de globale instellingen anders te gebruiken) link: 'http: // website // Lees meer URL-koppeling }); // Start de schuifknop my_slider.start (); }); </ script> 

Korte voorbeeld zonder variabele gebruiken chaining:

 <script type = "text / javascript"> $ (document).ready (function () { $ ('. example1') .fws2 ({kogels: 1, pijlen: 0}) .addSlide ({image: 'img / slide_1.jpg', titel: "Slide 1 ', omschrijving:' Omschrijving ', link:" http: // website'}) .addSlide ({image: 'img / slide_2.jpg', titel: 'Slide 2', beschrijving: 'Omschrijving', link: "http: // website '}) .addSlide ({image: 'img / slide_3.jpg', titel: 'Slide 3', beschrijving: 'Omschrijving', link: "http: // website '}) .begin(); }); </ script> 

Bijvoorbeeld met behulp van callback functie

 <script type = "text / javascript"> $ (document).ready (function () { var example_slider = $ ('. example2') fws2 ().; example_slider.settings ({ afterInit: function () { alert ('Slider klaar!'); }, slideEnd: function (slide) { var title = slide.find ("titel.") tekst (.); alert ('Dit is "+ titel); } }); example_slider.addSlide ({image: 'img / slide_1.jpg', titel: "Slide 1 ', omschrijving:' Omschrijving ', link:" http: // website'}); example_slider.addSlide ({image: 'img / slide_2.jpg', titel: 'Slide 2', beschrijving: 'Omschrijving', link: "http: // website '}); example_slider.addSlide ({image: 'img / slide_3.jpg', titel: 'Slide 3', beschrijving: 'Omschrijving', link: "http: // website '}); example_slider.start (); }); </ script> 

Bijvoorbeeld het aanpassen van HTML

 <script type = "text / javascript"> $ (document).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>% desc% </ span> </ p>', LinkText: 'Lees meer' linkHTML: '<a href="%link%">% LinkText% over% title% </a>' }); example_slider .addSlide ({image: 'img / slide_1.jpg', titel: "Slide 1 ', omschrijving:' Omschrijving ', link:" http: // website'}) .addSlide ({image: 'img / slide_2.jpg', titel: 'Slide 2', beschrijving: 'Omschrijving', link: "http: // website '}) .addSlide ({image: 'img / slide_3.jpg', titel: 'Slide 3', beschrijving: 'Omschrijving', link: "http: // website '}) .begin(); }); </ script> 

Blijf op de hoogte!

Volg ons op Facebook of Twitter en krijg het laatste nieuws over de post updates en komende plugins en scripts!

U kunt ons ook volgen op Instagram en binnenkort op YouTube met video tutorials over hoe we onze plugins en scripts te installeren!

Changelog

8 december 2015

- Javascript code is herschreven.
- Imagesloaded.js script is nu optioneel.
- HTML is verwijderd. Het wordt nu volledig op te bouwen uit de javascript.
- Google font verbinding wordt verwijderd uit het hoofd als het niet langer wordt gebruikt.
- Slider is nu geïnitialiseerd met behulp van $ (selector).fws2 ();

- Nieuwe methoden:

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

- Nieuwe opties:

 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 ondersteunt nu meerdere exemplaren op de pagina.
- Toegevoegd kogels navigatie.
- Arrow / Bullets navigatiesysteem kan nu aan / uit worden gezet.
- Optie toegevoegd om Autoslide stop te schakelen op mouseover.
- Slider gebruikt nu font-awesome in plaats van beelden voor de navigatie-pijlen en kogels.
- Toegevoegd keyboard links / rechts pijl navigatie.


Downloaden
Andere onderdelen in deze categorieAlle onderdelen van deze auteur
OpmerkingenVeelgestelde vragen en antwoorden

Eigenschappen

Gemaakt:
16 november 12

Laatste update:
8 december 15

Hoge resolutie:
Ja

Compatibele Browsers:
IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Bestanden Inbegrepen:
JS JavaScript, HTML, CSS

Software versie:
jQuery

Trefwoorden

eCommerce, eCommerce, Alle spullen, vol, javascript, jQuery, js, responsieve, schuif, slideshow, breedte