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

@pt1wwsAssine o nosso feed para se manter atualizado!

Novo! Siga-nos o que você quiser!


Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

O Slider permite que você tenha conteúdo horizontaly alinhados que não se encaixa no tamanho da janela que você deseja. Você pode colocar quantos itens quiser. Um item consiste de uma imagem, um rótulo e um link. Se você quiser, pode substituir o texto do link para todas ou para apenas um ou dois itens.

Como usar

Depois incluindo PrototypeJS e Scriptaculous (+ efeitos dragp & drop), incluem os slider.js de arquivo (objeto) e do slider.css arquivo (estilo).

Em seguida, basta incluir algo como isto na carga de janela:

 nova Slider ({ "slider": "slider-test1", "itens": [ {"File": "heroes.jpg", "label": "link" "Heroes": "http://www.hulu.com/heroes"}, {"Link" "Prison Break",:: "file": "prisonbreak.jpg", "label" "http://www.hulu.com/prison-break"} ] }); 

Esse código cria um controle deslizante no elemento que tem o ID "slider-test". Tem 2 itens: Heroes e Prison Break.

Opções Slider

A próxima lista mostra todas as opções disponíveis para o Slider.
  • deslizante - deslizante objeto pai ou ID
  • itemWidth - largura de slides (o padrão é 320)
  • itemHeight - altura de diapositivos (o padrão é 200)
  • imagens de slide de caminho (o padrão é "images /") - o trajeto
  • linkText - diapositivo texto do link padrão (o padrão é "Explorar")
  • animar - animar controle deslizante (o padrão é true). O controle deslizante irá manter a rolagem até que você clique no dragger.
  • animationDelay - tempo entre animações, em segundos (o padrão é 5)
  • slideDelay - tempo de efeito slide, em segundos (o padrão é 1)
  • slideLoop - ao atingir o último ponto, volta para o primeiro? (o padrão é true)
  • onClick - evento chamado ao clicar em um link de item (default é nenhum)

Em vez de fornecer um link para cada item, você pode definir uma função de retorno ao clicar em um item específico ou um retorno de chamada padrão. Observe que se você definir um retorno de chamada padrão, ele irá sempre ser chamado e não há ligações será utilizado.

 nova Slider ({ "slider": "slider-test1", "onClick": function (item) { alert ("Você clicou rubrica" ​​+ item.get ("label")); } "itens": [ {"File": "heroes.jpg", "label": "Heroes"}, {"File": "prisonbreak.jpg", "label": "Prison Break", "onClick": function () {alert ("Você clicou PRISON BREAK!"); }} ] }); 

No código anterior, o retorno de chamada padrão será chamado para item "Heroes", mas não para "Prison Break", pois este item tem um retorno de chamada específico.

Confira a demonstração em http://envato.diogoresende.net/slider/


Download
Outros componentes nesta categoriaTodos os componentes deste autor
ComentáriosPerguntas mais frequentes perguntas e respostas

Propriedades

Criado:
24 de 10 de fevereiro

Última atualização:
N / D

Navegadores compatíveis:
Firefox, IE7, IE8, Opera, Safari

Arquivos incluídos:
CSS, HTML, JavaScript JS

JS Biblioteca:
Protótipo 1.6, Script.aculo.us

Palavras-chave

eCommerce, eCommerce, Todos os itens, bandeira, deslizamento