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

@pt1wwsAssine o nosso feed para se manter atualizado!

Novo! Siga-nos o que você quiser!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Largura completa Slider 2 é fácil de usar jQuery controle deslizante imagem otimizada para a largura de tela cheia.

Características

- JQuery conduzido.
- Projeto Responsive.
- Velocidade de transição ajustável.
- Auto slideshow com pausa em foco.
- Compatível com todos os principais navegadores (IE8 e, sobretudo, Chrome, Firefox, Safari e Opera)
- Pode adicionar título, descrição e link botão para cada slide.

Novos Métodos:

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

Novas opções:

 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

Exemplo com todas as configurações:

 <script type = "text / javascript"> $ (document).ready (function () { // Criar uma nova instância de controle deslizante var my_slider = $ ('. exemplo') fws2 (.); // Definir configurações de controle deslizante (opcional) Você pode ignorar completamente este bloco my_slider.settings ({ cs: 0, // do slide atual; 0 - primeiro, 1 - segunda etc... Duração: 750, // duração de slides; milissegundos hoverpause: 1, // pausa em foco; 1 - Sim, 0 - Não pausar: 6000, // pausa antes de ir para o próximo slide; milissegundos setas: 1, // setas de exibição; 1 - Sim, 0 - Não balas: 0, // exibe balas; 1 - Sim, 0 - Não expandDuration: 750, // setas de Exibição; 1 - Sim, 0 - Não linktext: 'Leia Mais', // Botão de texto (configuração global) // Opções avançadas titleHTML: '<h4> title%% </ h4>', // HTML personalizado para o título descriptionHTML: '<p>% desc% </ p>', // HTML personalizado para a Descrição linkHTML: '<a href="%link%">% linktext% </a>', // HTML personalizado para o botão de ligação beforeInit: function () {} // Função para executar antes de controle deslizante de init afterInit: function () {} // Função para executar após controle deslizante de init slideStart: function (slide) {} // Função para ser executado no início slide, retorna o objeto de slide slideEnd: function (slide) {} // Função para ser executado no final de slides, retorna o objeto de slide }); // Slides Adição my_slider.addSlide ({ imagem: 'img / slide_1.jpg', // Fonte da imagem título: 'Slide 1', // Título Descrição: 'Descrição', // Deslize Descrição linktext: '', // Texto do botão (Opcional, vai usar as configurações globais de outra forma) link: 'http: // site' // Leia mais ligação URL }); // Iniciar o controle deslizante my_slider.start (); }); </ script> 

Exemplo reduzido sem variável, utilizando o encadeamento:

 <script type = "text / javascript"> $ (document).ready (function () { $ ('. example1') .fws2 ({balas: 1, setas: 0}) .addSlide ({imagem: 'img / slide_1.jpg', título: 'Slide 1', description: "Descrição", link: 'http: // site'}) .addSlide ({imagem: 'img / slide_2.jpg', título: 'Slide 2', description: "Descrição", link: 'http: // site'}) .addSlide ({imagem: 'img / slide_3.jpg', título: 'Slide 3', description: "Descrição", link: 'http: // site'}) .começar(); }); </ script> 

Exemplo usando a função de callback

 <script type = "text / javascript"> $ (document).ready (function () { var example_slider = $ ('. example2') fws2 (.); example_slider.settings ({ afterInit: function () { alert ('Slider pronto!'); }, slideEnd: function (slide) { var title = slide.find ("título".) texto (.); alert ('Isto é' + título); } }); example_slider.addSlide ({imagem: 'img / slide_1.jpg', título: 'Slide 1', description: "Descrição", link: 'http: // site "}); example_slider.addSlide ({imagem: 'img / slide_2.jpg', título: 'Slide 2', description: "Descrição", link: 'http: // site "}); example_slider.addSlide ({imagem: 'img / slide_3.jpg', título: 'Slide 3', description: "Descrição", link: 'http: // site "}); example_slider.start (); }); </ script> 

Exemplo personalizar HTML

 <script type = "text / javascript"> $ (document).ready (function () { var example_slider = $ ('. exemplo4') 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: 'Leia mais', linkHTML: '<a href="%link%">% linktext% sobre% title% </a>' }); example_slider .addSlide ({imagem: 'img / slide_1.jpg', título: 'Slide 1', description: "Descrição", link: 'http: // site'}) .addSlide ({imagem: 'img / slide_2.jpg', título: 'Slide 2', description: "Descrição", link: 'http: // site'}) .addSlide ({imagem: 'img / slide_3.jpg', título: 'Slide 3', description: "Descrição", link: 'http: // site'}) .começar(); }); </ script> 

Mantenha-se atualizado!

Siga-nos no Facebook ou Twitter e receba as últimas notícias sobre atualizações dos pontos e as próximas plugins e scripts!

Você também pode nos seguir no Instagram e logo no YouTube com tutoriais em vídeo sobre como instalar os nossos plugins e scripts!

Changelog

8 de dezembro de 2015

- Código Javascript foi reescrita.
- Roteiro imagesloaded.js agora é opcional.
- HTML foi removido. Agora, é construir completamente do javascript.
- Ligação da fonte Google é removido da cabeça, uma vez que não é mais usado.
- Slider agora é inicializado usando $ (selector).fws2 ();

- Novos Métodos:

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

- Novas opções:

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

- Slider agora suporta várias instâncias na página.
- Adicionado navegação balas.
- Arrow / navegação Bullets pode ser transformado ON / OFF agora.
- Opção para desativar parada autoslide em mouseover Adicionado.
- Slider usa agora font-impressionante em vez de imagens para as setas de navegação e balas.
- Teclado Adicionado esquerda / seta para a direita de navegação.


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

Propriedades

Criado:
16 de novembro 12

Última atualização:
8 15 de dezembro

Alta resolução:
sim

Navegadores compatíveis:
IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Arquivos incluídos:
JS JavaScript, HTML, CSS

Versão do software:
jQuery

Palavras-chave

eCommerce, eCommerce, Todos os itens, cheio, javascript, jquery, js, responsivo, controle deslizante, slideshow, largura