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

Slider

— Add- On para WorldWideScripts.net

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

¡Nuevo! Síguenos como quieras!


Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

El control deslizante le permite tener contenido horizontalmente alineadas que no encaje en el tamaño de la ventana que desea. Usted puede poner tantos elementos como desee. Un elemento consta de una imagen, una etiqueta y un enlace. Si lo deseas, puedes sustituir el texto del enlace a la totalidad o para una o dos artículos.

Cómo utilizar

Después de incluir PrototypeJS y Scriptaculous (efectos + dragp & drop), incluir los slider.js archivo (objeto) y la slider.css archivo (estilo).

Luego, basta con incluir algo como esto en la carga de la ventana:

 nueva deslizante ({ "slider": "slider-test1", "artículos" : [ {"Archivo": "etiqueta" "heroes.jpg": "link" "Héroes": "http://www.hulu.com/heroes"}, {"Archivo": "prisonbreak.jpg", "etiqueta": "Prison Break", "link": "http://www.hulu.com/prison-break"} ] }); 

Este código crea un control deslizante en el elemento que tiene el ID "slider-test". Cuenta con 2 artículos: Heroes y Prison Break.

Opciones deslizantes

La siguiente lista muestra todas las opciones disponibles para el Slider.
  • slider - corredera objeto padre o ID
  • itemWidth - ancho de la diapositiva (por defecto es 320)
  • ItemHeight - Altura de diapositivas (por defecto es 200)
  • imágenes de diapositivas de ruta (por defecto es "images /") - ruta
  • linkText - slide texto de enlace predeterminada (por defecto es "Explore")
  • animar - animar deslizador (por defecto es true). El control deslizante mantendrá desplazamiento hasta que hace clic en el dragger.
  • animationDelay - tiempo entre animaciones, en segundos (por defecto es 5)
  • slideDelay - momento del efecto de diapositivas, en segundos (por defecto es 1)
  • slideLoop - al llegar al último punto, el lazo a la primera? (por defecto es true)
  • onClick - evento llamado al hacer clic en un enlace de material (por defecto es ninguno)

En lugar de proporcionar un enlace a cada elemento, se puede establecer una llamada de retorno al hacer clic en un elemento específico o una devolución de llamada predeterminado. Observe que si establece una devolución de llamada predeterminado, que siempre se llamó y se utilizará enlaces.

 nueva deslizante ({ "slider": "slider-test1", "onClick": function (item) { alert ("Ha hecho clic en este artículo" + item.get ("etiqueta")); } "artículos" : [ {"Archivo": "heroes.jpg", "etiqueta": "Héroes"}, {"Archivo": "prisonbreak.jpg", "etiqueta": "Prison Break", "onClick": function () {alert ("Usted hace clic en Prison Break!"); }} ] }); 

En el código anterior, la devolución de llamada por defecto será llamado para el artículo "Héroes" pero no para "Prison Break", ya que este artículo tiene una devolución de llamada específica.

Echa un vistazo a la demo en http://envato.diogoresende.net/slider/


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

Propiedades

Creado:
24 de febrero 10

Última actualización:
N / A

Los navegadores compatibles:
Firefox, IE7, IE8, Opera, Safari

Archivos incluidos:
CSS, HTML, JavaScript JS

JS Biblioteca:
Prototype 1.6, Script.aculo.us

Palabras clave

eCommerce, eCommerce, Todos los objetos, bandera, corredizo