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

Rep les nostres RSS per estar al dia!

Nou! Segueix-nos com vulguis!


Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

El control lliscant li permet tenir contingut horitzontalment alineades que no encaixi en la mida de la finestra que desitja. Vostè pot posar tants elements com vulgui. Un element consta d'una imatge, una etiqueta i un enllaç. Si vols, pots substituir el text de l'enllaç a la totalitat o per a una o dos articles.

Com utilitzar

Després d'incloure PrototypeJS i Scriptaculous (efectes + dragp & drop), incloure els slider.js arxiu (objecte) i la slider.css arxiu (estil).

Després, només cal incloure alguna cosa com això en la càrrega de la finestra:

 nova lliscant ({ "slider": "slider-test1", "elements": [ {"Arxiu": "etiqueta" "heroes.jpg": "link" "Herois": "http://www.hulu.com/heroes"}, {"Arxiu": "prisonbreak.jpg", "etiqueta": "Prison Break", "link": "http://www.hulu.com/prison-break"} ] }); 

Aquest codi crea un control lliscant en l'element que té l'ID "slider-test". Disposa de 2 articles: Heroes i Prison Break.

Opcions lliscants

La següent llista mostra totes les opcions disponibles per al Slider.
  • slider - corredissa objecte pare o ID
  • itemWidth - ample de la diapositiva (per defecte és 320)
  • ItemHeight - Alçada de diapositives (per defecte és 200)
  • imatges de diapositives de ruta (per defecte és "images /") - ruta
  • linktext - slide text per defecte (per defecte és "Explore")
  • animar - animar lliscant (per defecte és true). El control lliscant mantindrà desplaçament fins que fa clic al dragger.
  • animationDelay - temps entre animacions, en segons (per defecte és 5)
  • slideDelay - moment de l'efecte de diapositives, en segons (per defecte és 1)
  • slideLoop - en arribar a l'últim punt, el llaç a la primera? (per defecte és true)
  • onClick - esdeveniment anomenat en fer clic en un enllaç de material (per defecte és cap)

En lloc de proporcionar un enllaç a cada element, es pot establir una trucada de retorn al fer clic a un element específic o una devolució de trucada predeterminat. Observi que si estableix una devolució de trucada predeterminat, que sempre s'ha dit i s'utilitzarà enllaços.

 nova lliscant ({ "slider": "slider-test1", "onClick": function (item) { alert ("Ha fet clic en aquest article" + item.get ("etiqueta")); } "elements": [ {"Arxiu": "heroes.jpg", "etiqueta": "Herois"}, {"Arxiu": "prisonbreak.jpg", "etiqueta": "Prison Break", "onClick": function () {alert ("Vostè fa clic a Prison Break!"); }} ] }); 

En el codi anterior, la devolució de trucada per defecte serà cridat per l'article "Herois" però no per a "Prison Break", ja que aquest article té una devolució de trucada específica.

Fes una ullada a la demo en http://envato.diogoresende.net/slider/


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

Propietats

Creat:
Febrer 24 10

Darrera actualització:
N / A

Els navegadors compatibles:
Firefox, IE7, IE8, Opera, Safari

Arxius inclosos:
CSS, HTML, JavaScript JS

JS Biblioteca:
Prototype 1.6, Script.aculo.us

Paraules clau

eCommerce, eCommerce, Tots els Articles, bandera, lliscant