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

Rep les nostres RSS per estar al dia!

Nou! Segueix-nos com vulguis!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Ample complet lliscant 2 és fàcil d'usar jQuery slider imatge optimitzada per a ample de la pantalla completa.

Característiques

- JQuery impulsat.
- Disseny Sensible.
- Velocitat de transició ajustable.
- Auto presentació amb pausa en vol estacionari.
- Compatible amb tots els principals navegadors (Internet Explorer 8 o superior, Chrome, Firefox, Safari i Opera)
- Pot afegir el títol, descripció i el botó d'enllaç a cada diapositiva.

Nous mètodes:

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

Noves opcions:

 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 amb tots els ajustos:

 <script type = "text / javascript"> $ (Document).ready (function () { // Crea instància lliscant var my_slider = $ ('. exemple') fws2 (.); // Configuració del control lliscant d'ajust (opcional) Podeu ignorar per complet aquest bloc my_slider.settings ({ cs: 0, // diapositiva actual; 0 - primer, 1 - segon etc... Durada: 750, // durada de diapositives; mil·lisegons hoverpause: 1, // Pausa en vol estacionari; 1 - Sí, 0 - No pausa: 6000, // Pausa abans d'anar a la següent diapositiva; mil·lisegons fletxes: 1, // visualització de les fletxes; 1 - Sí, 0 - No bales: 0, // Mostra bales; 1 - Sí, 0 - No expandDuration: 750, // Mostra fletxes; 1 - Sí, 0 - No linktext: 'Llegir més', // Text del botó (configuració global) // Opcions avançades titleHTML: '<h4> title %% </ h4>', // HTML personalitzada per al títol descriptionHTML: '<p>% desc% </ p>', // HTML personalitzat per a la Descripció linkHTML: '<a href="%link%">% linktext% </a>' per al botó d'enllaç, // HTML personalitzat beforeInit: function () {}, // Funció per executar abans d'init lliscant afterInit: function () {}, // Funció per executar després d'init lliscant slideStart: function (diapositiva) {}, // Funció per executar en l'arrencada de diapositives, retorna l'objecte de diapositiva slideEnd: function (diapositiva) {} // Funció per funcionar amb fins de diapositives, retorna l'objecte de diapositiva }); // Addició de diapositives my_slider.addSlide ({ imatge: «img / slide_1.jpg ', // Font de la imatge Títol: 'Slide 1', // Títol Descripció: 'Descripció', // Slide Descripció linktext: '', // Text del botó (opcional, utilitzarà la configuració global del contrari) link: 'http: // web' // Llegir més enllaç URL }); // Inicia el control lliscant my_slider.start (); }); </ Script> 

Exemple curt i sense variables, mitjançant l'encadenament:

 <script type = "text / javascript"> $ (Document).ready (function () { $ ('. Example1') .fws2 ({bales: 1, fletxes: 0}) .addSlide ({imatge: «img / slide_1.jpg ', títol:' Slide 1 ', vista:" Descripció ", enllaç:' http: // web '}) .addSlide ({imatge: «img / slide_2.jpg ', títol:' Slide 2 ', vista:" Descripció ", enllaç:' http: // web '}) .addSlide ({imatge: «img / slide_3.jpg ', títol:' Slide 3 ', vista:" Descripció ", enllaç:' http: // web '}) .start (); }); </ Script> 

Exemple d'usar la funció de devolució de trucada

 <script type = "text / javascript"> $ (Document).ready (function () { var example_slider = $ ('. example2') fws2 (.); example_slider.settings ({ afterInit: function () { alert ('Botó lliscant llest!'); }, slideEnd: function (diapositiva) { var title = slide.find ("títol".) text (.); alert ('Això és' + títol); } }); example_slider.addSlide ({imatge: «img / slide_1.jpg ', títol:' Slide 1 ', vista:" Descripció ", enllaç:' http: // web '}); example_slider.addSlide ({imatge: «img / slide_2.jpg ', títol:' Slide 2 ', vista:" Descripció ", enllaç:' http: // web '}); example_slider.addSlide ({imatge: «img / slide_3.jpg ', títol:' Slide 3 ', vista:" Descripció ", enllaç:' http: // web '}); example_slider.start (); }); </ Script> 

Exemple personalització HTML

 <script type = "text / javascript"> $ (Document).ready (function () { var example_slider = $ ('. Exemple4') fws2 (.); example_slider.settings ({ titleHTML: '<h1> <a href="%link%">% títol% </a> </ h1>', descriptionHTML: '<p> <i class = "fa fa-check" /> <span>% desc% </ span> </ p>', linktext: 'Llegir més', linkHTML: '<a href="%link%">% linktext% sobre% title% </a>' }); example_slider .addSlide ({imatge: «img / slide_1.jpg ', títol:' Slide 1 ', vista:" Descripció ", enllaç:' http: // web '}) .addSlide ({imatge: «img / slide_2.jpg ', títol:' Slide 2 ', vista:" Descripció ", enllaç:' http: // web '}) .addSlide ({imatge: «img / slide_3.jpg ', títol:' Slide 3 ', vista:" Descripció ", enllaç:' http: // web '}) .start (); }); </ Script> 

Estigues informat!

Segueix-nos a Facebook o Twitter i rebre les últimes notícies sobre les actualitzacions d'articles i propers plugins i scripts!

També pots seguir-nos a Instagram i aviat a YouTube amb vídeos de tutorials sobre com instal·lar els nostres plugins i scripts!

Historial de canvis

8 desembre 2015

- Codi Javascript ha estat reescrit.
- Guió imagesloaded.js ara és opcional.
- HTML s'ha eliminat. Ara es construeix completament de la javascript.
- Enllaç de la font Google es treu del cap, ja que ja no s'utilitza.
- Control lliscant està inicialitzat usant $ (selector).fws2 ();

- Nous mètodes:

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

- Noves opcions:

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

- Botó lliscant ara suporta múltiples instàncies a la pàgina.
- S'ha afegit bales de navegació.
- Fletxa / Vinyetes de navegació es pot activar ON / OFF ara.
- Opció per desactivar la parada Autoslide en mouseover Afegit.
- Botó lliscant ara fa servir-font impressionant en lloc d'imatges per a les fletxes de navegació i bales.
- Teclat Afegit esquerra / fletxa de navegació dreta.


Descarregar
Altres components d'aquesta categoriaTots els components d'aquest autor
Comentaris dels clientsPreguntes freqüents i respostes

Propietats

Creat:
16 de novembre 12

Darrera actualització:
Desembre 8 15

Alta resolució:

Els navegadors compatibles:
IE8, IE9, IE10, EI11, Firefox, Safari, Opera, Chrome

Arxius inclosos:
JavaScript JS, HTML, CSS

Versió del programari:
jQuery

Paraules clau

eCommerce, eCommerce, Tots els Articles, complet, javascript, jQuery, js, sensible, lliscant, slideshow, ample