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

@fr1wwsAbonnez-vous à notre RSS pour rester à jour!

Nouveau! Suivez-nous que vous le souhaitez!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Largeur complet coulissant 2 est facile à utiliser jQuery curseur sur l'image optimisé pour toute la largeur de l'écran.

Caractéristiques

- JQuery entraînée.
- Responsive Design.
- La vitesse de transition réglable.
- Diaporama automatique avec pause sur le vol stationnaire.
- Compatible avec tous les principaux navigateurs (IE8 et au-dessus, Chrome, Firefox, Safari et Opera)
- Possibilité d'ajouter le titre, la description et le bouton de lien à chaque diapositive.

Nouvelles méthodes:

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

Nouvelles options:

 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

Exemple avec tous les paramètres:

 <script type = "text / javascript"> $ (document).ready (function () { // Crée une nouvelle instance de curseur var my_slider = $ ('. par exemple) fws2 ().; // Paramètres de curseur Set (facultatif) Vous pouvez ignorer complètement ce bloc my_slider.settings ({ cs: 0, // diapositive en cours; 0 - première, 1 - deuxième etc... durée: 750, // Durée de la diapositive; millisecondes hoverpause: 1, // Mettre en pause sur le vol stationnaire; 1 - Oui, 0 - Non pause: 6000, // pause avant aller à la diapositive suivante; millisecondes flèches: 1, // affichage des flèches; 1 - Oui, 0 - Non balles: 0, // Afficher les balles; 1 - Oui, 0 - Non expandDuration: 750, // affichage des flèches; 1 - Oui, 0 - Non linktext: «Lire la suite», // Button Text (réglage global) // Options avancées titleHTML: '<h4>% Titre% </ h4>', // HTML personnalisé pour le titre descriptionHTML: '<p>% desc% </ p>', // HTML personnalisés pour la description linkHTML: '<a href="%link%">% linktext% </a>', // HTML personnalisé pour le bouton de lien beforeInit: function () {}, // fonction à exécuter avant le curseur initialisation afterinit: function () {}, // Fonction à exécuter après curseur initialisation slideStart: function (diaporama) {}, // Fonction pour lancer au démarrage de la diapositive, renvoie l'objet de diapositive slideEnd: function (diaporama) {} // Fonction à exécuter sur la fin de la diapositive, renvoie l'objet de diapositive }); // Ajout de diapositives my_slider.addSlide ({ l'image: «img / slide_1.jpg ', // Image source Titre: 'Slide 1', // Titre Description: 'Description', // Slide Description linktext: '', // Button Text (Facultatif, va utiliser les paramètres globaux autrement) lien: «http: // site '// Read More lien URL }); // Démarre le curseur my_slider.start (); }); </ script> 

Court exemple sans variables, en utilisant le chaînage:

 <script type = "text / javascript"> $ (document).ready (function () { $ ('. example1') .fws2 ({balles: 1, des flèches: 0}) .addSlide ({l'image: «img / slide_1.jpg ', titre:' Slide 1 ', la description:« Description », lien:« http: // site'}) .addSlide ({l'image: «img / slide_2.jpg ', titre:' Slide 2 ', la description:« Description », lien:« http: // site'}) .addSlide ({l'image: «img / slide_3.jpg ', titre:' Slide 3 ', la description:« Description », lien:« http: // site'}) .démarrer(); }); </ script> 

Exemple d'utilisation de la fonction de rappel

 <script type = "text / javascript"> $ (document).ready (function () { var example_slider = $ ('. example2') fws2 ().; example_slider.settings ({ afterinit: function () { alert ('Curseur prêt!'); }, slideEnd: function (diaporama) { var title = slide.find ("titre.") texte ().; alert ('Ceci est' title +); } }); example_slider.addSlide ({l'image: «img / slide_1.jpg ', titre:' Slide 1 ', la description:« Description », lien:« http: // site'}); example_slider.addSlide ({l'image: «img / slide_2.jpg ', titre:' Slide 2 ', la description:« Description », lien:« http: // site'}); example_slider.addSlide ({l'image: «img / slide_3.jpg ', titre:' Slide 3 ', la description:« Description », lien:« http: // site'}); example_slider.start (); }); </ script> 

Exemple personnalisation 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: «Lire la suite», linkHTML: '<a href="%link%">% linktext% environ% title% </a>' }); example_slider .addSlide ({l'image: «img / slide_1.jpg ', titre:' Slide 1 ', la description:« Description », lien:« http: // site'}) .addSlide ({l'image: «img / slide_2.jpg ', titre:' Slide 2 ', la description:« Description », lien:« http: // site'}) .addSlide ({l'image: «img / slide_3.jpg ', titre:' Slide 3 ', la description:« Description », lien:« http: // site'}) .démarrer(); }); </ script> 

Tiens-toi à jour!

Suivez-nous sur Facebook ou Twitter et obtenir les dernières nouvelles au sujet des mises à jour de l'objet et les plugins et les scripts à venir!

Vous pouvez également nous suivre sur Instagram et bientôt sur ​​YouTube avec des tutoriels vidéo sur la façon d'installer nos plugins et les scripts!

Changelog

8 décembre 2015

- Code Javascript a été réécrit.
- Script imagesloaded.js est maintenant optionnelle.
- HTML a été supprimé. Il est maintenant complètement construit à partir du javascript.
- Lien Google de police est retiré de la tête car il est plus utilisé.
- Slider est maintenant initialisé en utilisant $ (sélecteur).fws2 ();

- Nouvelles méthodes:

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

- Nouvelles options:

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

- Curseur prend désormais en charge plusieurs instances sur la page.
- Ajout de balles navigation.
- Flèche / Bullets navigation peut être activé / désactivé maintenant.
- Option pour désactiver l'arrêt de AutoSlide sur mouseover ajouté.
- Curseur utilise maintenant font-génial plutôt que des images pour les flèches de navigation et des balles.
- Clavier Ajouté gauche / droite navigation flèche.


Télécharger
D'autres éléments de ce typeTous les composants de cet auteur
CommentairesFoire aux questions et réponses

Propriétés

Créé:
16 Novembre 12

Dernière mise à jour:
8 Décembre 15

Haute résolution:
Oui

Navigateurs compatibles:
IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Fichiers inclus:
JS JavaScript, HTML, CSS

Une version de logiciel:
jQuery

Mots-clés

commerce é, lectronique, commerce é, lectronique, Tous les objets, complet, javascript, jquery, js, sensible, curseur, diaporama, largeur