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

@es1wwsSuscríbete a nuestro RSS para estar al día!

¡Nuevo! Síguenos como quieras!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Ancho completo deslizante 2 es fácil de usar jQuery slider imagen optimizada para ancho de la pantalla completa.

Caracteristicas

- JQuery impulsado.
- Diseño de respuesta.
- Velocidad de transición ajustable.
- Auto presentación con pausa en vuelo estacionario.
- Compatible con todos los principales navegadores (Internet Explorer 8 o superior, Chrome, Firefox, Safari y Opera)
- Puede añadir el título, descripción y el botón de enlace a cada diapositiva.

Nuevos métodos:

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

Nuevas opciones:

 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

Ejemplo con todos los ajustes:

 <script type = "text / javascript"> $ (document).ready (function () { // Crear nueva instancia deslizador var my_slider = $ ('. ejemplo') fws2 (.); // Configuración del control deslizante de ajuste (opcional) Puede ignorar por completo este bloque my_slider.settings ({ cs: 0, // diapositiva actual; 0 - primero, 1 - segundo etc... Duración: 750, // duración de diapositivas; milisegundos hoverpause: 1, // Pausa en vuelo estacionario; 1 - Sí, 0 - No pausa: 6000, // Pausa antes de ir a la siguiente diapositiva; milisegundos flechas: 1, // visualización de las flechas; 1 - Sí, 0 - No balas: 0, // Mostrar balas; 1 - Sí, 0 - No expandDuration: 750, // Mostrar flechas; 1 - Sí, 0 - No linktext: 'Leer más', // Texto del botón (configuración global) // Opciones avanzadas titleHTML: '<h4> title%% </ h4>', // HTML personalizada para el Título descriptionHTML: '<p>% desc% </ p>', // HTML personalizado para la Descripción linkHTML: '<a href="%link%">% linktext% </a>' para el botón de enlace, // HTML personalizado beforeInit: function () {}, // Función para ejecutar antes de init deslizador afterInit: function () {}, // Función para ejecutar después de init deslizador slideStart: function (diapositiva) {}, // Función para ejecutar en el arranque de diapositivas, devuelve el objeto de diapositiva slideEnd: function (diapositiva) {} // Función para funcionar con fines de diapositivas, devuelve el objeto de diapositiva }); // Adición de diapositivas my_slider.addSlide ({ imagen: «img / slide_1.jpg ', // Fuente de la imagen Título: 'Slide 1', // Título Descripción: 'Descripción', // Slide Descripción linktext: '', // Texto del botón (Opcional, utilizará la configuración global de lo contrario) link: 'http: // web' // Leer más enlace URL }); // Inicia el control deslizante my_slider.start (); }); </ script> 

Ejemplo corto y sin variables, mediante el encadenamiento:

 <script type = "text / javascript"> $ (document).ready (function () { $ ('. example1') .fws2 ({balas: 1, flechas: 0}) .addSlide ({imagen: «img / slide_1.jpg ', título:' Slide 1 ', descripción:" Descripción ", enlace:' http: // web '}) .addSlide ({imagen: «img / slide_2.jpg ', título:' Slide 2 ', descripción:" Descripción ", enlace:' http: // web '}) .addSlide ({imagen: «img / slide_3.jpg ', título:' Slide 3 ', descripción:" Descripción ", enlace:' http: // web '}) .Empezar(); }); </ script> 

Ejemplo de usar la función de devolución de llamada

 <script type = "text / javascript"> $ (document).ready (function () { var example_slider = $ ('. example2') fws2 (.); example_slider.settings ({ afterInit: function () { alert ('Deslizador listo!'); }, slideEnd: function (diapositiva) { var title = slide.find ("título".) texto (.); alert ('Esto es' + título); } }); example_slider.addSlide ({imagen: «img / slide_1.jpg ', título:' Slide 1 ', descripción:" Descripción ", enlace:' http: // web '}); example_slider.addSlide ({imagen: «img / slide_2.jpg ', título:' Slide 2 ', descripción:" Descripción ", enlace:' http: // web '}); example_slider.addSlide ({imagen: «img / slide_3.jpg ', título:' Slide 3 ', descripción:" Descripción ", enlace:' http: // web '}); example_slider.start (); }); </ script> 

Ejemplo personalización HTML

 <script type = "text / javascript"> $ (document).ready (function () { var example_slider = $ ('. ejemplo4') fws2 (.); example_slider.settings ({ titleHTML: '<h1> <a href="%link%">% título% </a> </ h1>', descriptionHTML: '<p> <i class = "fa fa-check" /> <span>% desc% </ span> </ p>', linktext: 'Leer más', linkHTML: '<a href="%link%">% linktext% sobre% title% </a>' }); example_slider .addSlide ({imagen: «img / slide_1.jpg ', título:' Slide 1 ', descripción:" Descripción ", enlace:' http: // web '}) .addSlide ({imagen: «img / slide_2.jpg ', título:' Slide 2 ', descripción:" Descripción ", enlace:' http: // web '}) .addSlide ({imagen: «img / slide_3.jpg ', título:' Slide 3 ', descripción:" Descripción ", enlace:' http: // web '}) .Empezar(); }); </ script> 

Mantente informado!

Síguenos en Facebook o Twitter y recibir las últimas noticias acerca de las actualizaciones de artículos y próximos plugins y scripts!

También puedes seguirnos en Instagram y pronto en YouTube con videos de tutoriales sobre cómo instalar nuestros plugins y scripts!

Historial de cambios

08 de diciembre 2015

- Código Javascript ha sido reescrito.
- Guión imagesloaded.js ahora es opcional.
- HTML se ha eliminado. Ahora se construye completamente de la javascript.
- Enlace de la fuente Google se quita de la cabeza, ya que ya no se utiliza.
- Control deslizante está inicializado usando $ (selector).fws2 ();

- Nuevos métodos:

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

- Nuevas opciones:

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

- Deslizador ahora soporta múltiples instancias en la página.
- Se ha añadido balas de navegación.
- Flecha / Viñetas de navegación se puede activar ON / OFF ahora.
- Opción para desactivar la parada Autoslide en mouseover Añadido.
- Deslizador ahora usa-font impresionante en lugar de imágenes para las flechas de navegación y balas.
- Teclado Añadido izquierda / flecha de navegación derecha.


Descargar
Otros componentes de esta categoríaTodos los componentes de este autor
ComentariosPreguntas frecuentes y respuestas

Propiedades

Creado:
16 de noviembre 12

Última actualización:
08 de diciembre 15

Alta resolución:

Los navegadores compatibles:
IE8, IE9, IE10, EI11, Firefox, Safari, Opera, Chrome

Archivos incluidos:
JavaScript JS, HTML, CSS

Versión del software:
jQuery

Palabras clave

eCommerce, eCommerce, Todos los objetos, completo, javascript, jQuery, js, sensible, deslizador, diapositivas, anchura