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

@de1wwsAbonniere den Feed um auf dem neuesten Stand zu bleiben!

Neu! Folge uns, wie Du es möchtest!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Volle Breite Slider 2 ist einfach zu jQuery Bild Schieber für volle Bildschirmbreite optimiert zu nutzen.

Eigenschaften

- JQuery angetrieben.
- Sich anpassendes Design.
- Einstellbare Übergangsgeschwindigkeit.
- Auto Diashow mit Pause auf schweben.
- Kompatibel mit allen gängigen Browsern (IE8 und höher, Chrome, Firefox, Safari und Opera)
- Kann zu jeder Folie hinzuzufügen, Titel, Beschreibung und Link-Taste.

Neue Methoden:

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

Neue Optionen:

 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

Beispiel mit allen Einstellungen:

 <script type = "text / javascript"> $ (document).ready (function () { // Erstellen Sie neue Slider-Instanz var my_slider = $ ('. B.') fws2 (). // Setze Schieberegler-Einstellungen (optional) Sie können diese Block völlig ignorieren my_slider.settings ({ cs: 0, // Current slide; 0 - ersten, 1 - zweite usw.... Laufzeit: 750, // Slide Dauer; Millisekunden hoverpause: 1, // auf schweben Pause; 1 - Ja, 0 - Keine Pause: 6000 // Pause, bevor zum nächsten Folie zu gehen; Millisekunden Pfeile: 1, // Anzeige Pfeile; 1 - Ja, 0 - Keine Geschosse: 0, // Anzeige Kugeln; 1 - Ja, 0 - Keine expandDuration: 750, // Anzeige Pfeile; 1 - Ja, 0 - Keine Linktext: 'Mehr', // Button-Text (Globale Einstellung) // Erweiterte Optionen titleHTML: '<h4>% title% </ h4>', // Benutzerdefinierte HTML für den Titel descriptionHTML: '<p>% desc% </ p>', // Benutzerdefinierte HTML für die Beschreibung linkHTML: '<a href="%link%">% linktext% </a>', // Benutzerdefinierte HTML für die Link-Taste beforeInit: function () {} // Funktion vor dem Schieberegler init ausführen afterInit: function () {} // Funktion, um nach dem Schieberegler init ausführen slideStart: Funktion (Dia) {} // Funktion, um auf Folie Start ausführen, gibt die Folie-Objekt slideEnd: Funktion (Dia) {} // Funktion, um auf Folie Ende ausführen, gibt die Folie-Objekt }); // Hinzufügen von Schiebe my_slider.addSlide ({ Bild: "img / slide_1.jpg ', // Bildquelle Titel: 'Slide 1', // Titel Beschreibung: 'Beschreibung', // Slide Beschreibung Linktext: '', // Button-Text (Optional werden die globalen Einstellungen anderweitig zu nutzen) Link: "http: // Website" // Lesen Sie mehr URL-Link }); // Starten Sie den Schieberegler my_slider.start (); }); </ script> 

Kurzes Beispiel ohne variable, mit Verkettung:

 <script type = "text / javascript"> $ (document).ready (function () { $ ('. example1') .fws2 ({Geschosse: 1, Pfeile: 0}) .addSlide ({Bild: "img / slide_1.jpg ', Titel:' Slide 1", Beschreibung: "Beschreibung" link: "http: // Website"}) .addSlide ({Bild: "img / slide_2.jpg ', Titel:' Slide 2", Beschreibung: "Beschreibung" link: "http: // Website"}) .addSlide ({Bild: "img / slide_3.jpg ', Titel:' Slide 3 ', Beschreibung:" Beschreibung "link:" http: // Website "}) .Anfang(); }); </ script> 

Beispiel mit Callback-Funktion

 <script type = "text / javascript"> $ (document).ready (function () { var example_slider = $ ('. example2') fws2 (). example_slider.settings ({ afterInit: function () { alert ('Slider bereit!'); } slideEnd: Funktion (Dia) { var title = slide.find ("title"). text (). alert ('Dies ist' + Titel); } }); example_slider.addSlide ({Bild: "img / slide_1.jpg ', Titel:' Slide 1", Beschreibung: "Beschreibung" link: "http: // Website"}); example_slider.addSlide ({Bild: "img / slide_2.jpg ', Titel:' Slide 2", Beschreibung: "Beschreibung" link: "http: // Website"}); example_slider.addSlide ({Bild: "img / slide_3.jpg ', Titel:' Slide 3 ', Beschreibung:" Beschreibung "link:" http: // Website "}); example_slider.start (); }); </ script> 

Beispiel Anpassen 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: "Lesen Sie mehr" linkHTML: '<a href="%link%">% linktext% zu% title% </a>' }); example_slider .addSlide ({Bild: "img / slide_1.jpg ', Titel:' Slide 1", Beschreibung: "Beschreibung" link: "http: // Website"}) .addSlide ({Bild: "img / slide_2.jpg ', Titel:' Slide 2", Beschreibung: "Beschreibung" link: "http: // Website"}) .addSlide ({Bild: "img / slide_3.jpg ', Titel:' Slide 3 ', Beschreibung:" Beschreibung "link:" http: // Website "}) .Anfang(); }); </ script> 

Auf dem Laufenden bleiben!

Folgen Sie uns auf Facebook oder Twitter und erhalten Sie Neuigkeiten rund um Produkt-Updates und kommenden Plugins und Scripts!

Außerdem können Sie uns auf Instagram und bald auf YouTube mit Video-Tutorials auf, wie wir unsere Plugins und Scripts zu installieren!

Änderungsprotokoll

8. Dezember 2015

- Javascript-Code wurde neu geschrieben.
- Imagesloaded.js Skript ist jetzt optional.
- HTML wurde entfernt. Es ist nun vollständig aus dem Javascript bauen.
- Google Schriftlink wird vom Kopf entfernt, da sie nicht mehr verwendet wird.
- Slider wird nun durch Verwendung von $ (Selector) initialisiert.fws2 ();

- Neue Methoden:

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

- Neue Optionen:

 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 unterstützt nun mehrere Instanzen auf der Seite.
- Hinzugefügt Kugeln Navigation.
- Pfeil / Bullets Navigation kann ON / OFF jetzt eingeschaltet werden.
- Option zum Autoslide Stopp bei Mouseover deaktivieren hinzugefügt.
- Slider verwendet jetzt font-awesome anstelle von Bildern für die Navigationspfeile und Kugeln.
- Hinzugefügt Tastatur nach links / rechts Pfeil-Navigation.


Herunterladen
Weitere Komponenten in dieser KategorieAlle Komponenten dieses Autors
KommentareHäufige Fragen und Antworten

Eigenschaften

Erstellt:
16. November 12

Letzte Aktualisierung:
8. Dezember 15

Hohe Auflösung:
Ja

Unterstützte Browser:
IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Dateien enthalten:
JavaScript JS, HTML, CSS

Softwareversion:
jQuery

Stichworte

eCommerce, eCommerce, Alle Elemente, voll, javascript, jquery, js, ansprechend, Schieberegler, slideshow, Breite