JQuery

Em 29/05/2015 às 09:05h por Leonardo

Carousel (SlideShow) em Jquery

No artigo de hoje vou apresentar um slideshow ou carousel, feito em jquery 2.x e jquery ui para que vocês possam utilizar em seus projetos web e também aumentarem o conhecimento sobre Jquery, efeitos e um conjunto de ícones vindos de Font Awesome.

carousel slide show com jquery

Carousel

O plug-in utilizado fui eu quem desenvolveu, eu estou disponibilizando tanto as versões minify quanto o desenvolvimento completo. O plug-in esta versão 1.0, então podemos juntos melhorar muitas coisas nele, por isso caso modifiquem alguma coisa eu peço que postem aqui comentando sobre o que foi feito.

Agora sem mais delongas vamos à apresentação do plug-in.

Eu escolhi o nome de “Carousel” para este plug-in, o nome foi influenciado pelo Bootstrap, que também tem esta notação. O uso do Carousel é muito simples, basta ter a s lib Jquery 2.x e a API Jquery ui, estou disponibilizando ambas nos arquivos pra download.

Para chamar a função que criar o carousel precisamos montar certa estrutura em html:

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Carousel</title> <link rel="stylesheet" href="font-awesome-4.3.0/css/font-awesome.min.css"/> <script type="text/javascript" src="js/jquery-2.1.4.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> <script type="text/javascript" src="js/carousel.1.0.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.carousel').Carousel(); }); </script> </head> <body> <div class='carousel' data-height='500px' data-width='900px' data-effect='size' data-stop_on_hover='true'> <img src="img/1.jpeg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg" /> <img src="img/5.jpg" /> <img src="img/6.jpg" /> </div> </body> </html>

Reparem que dentro da div com classe carousel, ela precisa ser da forma como está para que o plug-in funcione.

Reparem também no conteúdo dentro do $(document).ready() pois é daquela forma que estanciamos nosso objeto carousel na tela, ou seja, $(‘.nome da classe’).Carousel();, este comando cria o carousel.

Para aqueles que já trabalham com Jquery, sabem que os parâmetros passados para um plug-in são feitos através de um objeto, um objeto em js é declarado como segue:

var objeto = { aqui fica a lista propriedade e valores};

Bem então podemos passar os parâmetros para o plug-in Carousel assim também:

 $(‘.carousel’).Carousel({ width: ‘900px’, height : ‘500px’ });

Veja que separei uma propriedade da outra com ( , ) e não ( ; ).

Reparem também que a propriedade é que vem primeiro depois coloco ( : ) e defino seu valor.

A lista de propriedades esta abaixo, cada uma já tem um valor padrão, portanto se não for definido nada, o plug-in funcionará, mas o legal é personalizar.

height	arrow_left	automatic
width	arrow_right	key_navegatio
position	activeColor	time_to_change
margin	btn_pause	menu
border	btn_play awesome	icones_selector
effect	has_selector	liClass
img_height	pause_able	color
img_width	stop_on_hover

Agora vocês podem ter reparado que no exemplo acima eu apenas declarei o Carousel() sem nenhuma propriedade, mas que lá embaixo no html eu coloquei alguns atributos na div, da classe carousel, esses atributos não são do html.

Estes são chamados de data-* atributes, e são uma mão na roda pra quem num quer ter que fazer muito com javascript, pois os mesmos valores que teria que passar por objeto a função Carousel() agora eu posso passar por ele, no html mesmo.

Ficou muito mais simples e melhor organizado também.

Abaixo eu deixo uma tabela com todos os ( data-* atributes ) e seus valores padrões.

Carousel doc como utilizar

Bibliotecas base atenção !!!

** Lembre-se que os endereçamentos podem mudar de acordo com a estrutura do seu projeto

Aplicando o plug-in $('elemento').Carousel()

HTML estrutura do html

** Atente-se para a estrutura

** Você pode utilizar class ou id para identificar sua div, escolhe a melhor opção para seu projeto.

Atributos por javascript parâmetros e estilização.

** todos os atributos seguem em tabela abaixo

Atributos por data-*attributes parâmetros e estilização.

** todos os atributos seguem em tabela abaixo

Lista de Atributos
javascript attributes	data-attributes	descrição	como usar	valor padrão
height	data-height	define a altura da div que contém os slides	string com valores do tamanho, como, "300px" ou "50%"	"100%"
width	data-width	define a largura da div que contém os slides	string com valores do tamanho, como, "300px" ou "50%"	"100%"
position	data-position	comportamento da posição da div que contém os slides, em relação ao elemento parent	string com a propriedade css para position	relative
margin	data-margin	comportamento utilizado para centralizar ou dar margin a div que contém os slides	string com a propriedade css para margin	0px auto
border	data-border	definir borda para a div que contém os slides	string com a propriedade css para border	none
effect	data-effect	define os efeitos de passagem dos slides	suporte aos seguintes efeitos: blind, bounce, clip, drop, explode, fade, fold, highlight, puff, pulsate, scale, shake, size, slide e transfer	slide
img_height	data-img_height	define a altura para as imagens utilizadas	string com valores do tamanho, como, "300px" ou "50%"	"100%"
img_width	data-img_width	define a largura para as imagens utilizadas	string com valores do tamanho, como, "300px" ou "50%"	"100%"
arrow_left	data-arrow_left	seta para a esquerda	string com icone font-awesome	< i class='fa-2x fa fa-chevron-left'> </i>
arrow_right	data-arrow_right	seta para a direita	string com icone font-awesome	< i class='fa-2x fa fa-chevron-right'> </i>
activeColor	data-activeColor	comportamento hover e active dos seletores e setas	string com a propriedade css para color em hexadecimal ou rbga	"#00BFFF" tom de azul
btn_pause	data-btn_pause	icone para o botão pause	string com icone font-awesome	< i class='fa-2x fa fa-pause'> </i>
btn_play	data-btn_play	icone para o botão play	string com icone font-awesome	< i class='fa-2x fa fa-play'> </i>
has_selector	data-has_selector	define se existirá botões para selecionar slides individualmente	boolean	true
icones_selector	data-icones_selector	icones com os seletores de slides	string com icone font-awesome	< i class='fa-2x fa fa-circle'> </i>
pause_able	data-pause_able	define se existirá botão pause	boolean	true
stop_on_hover	data-stop_on_hover	interrompe a passagem de slide quando mouse estiver sobre a imagem	boolean	true
automatic	data-automatic	a passagem de slide é iniciada automaticamente, e será mantida assim por intervalo determinado de tempo	boolean	true
time_to_change	data-time_to_change	tempo em que ocorre a transição automatica de slide	valor numérico int (inteiro) em milissegundos	8000
* key_navegation	* data-key_navegation	utiliza as setas do teclado para navegar entre os slides	boolean	false
menu	data-menu	objeto para formatação do menu, icones seletores e botões pause e play	objeto com propriedades css, por exemplo, '{"left": "0px", "top":"50px"}', lembrando que a orientação ocorre sempre a partir da esquerda e toda vez que top é utilizado tem preferencia em relação ao bottom	'{"position": "absolute", "bottom": "1px", "left": "0%", "right": "0%", "display": "flex","list-style": "none"}'
liClass	data-liClass	define uma classe para formatação geral dos menus	string com o nome da classe css	null
color	data-color	define as cores dos icones e botões	string com a propriedade css para color em hexadecimal ou rbga	"#000" preto

* A key_navegation ainda está em testes, existe uma chance de acontecer falhas em seu uso, por isso por padrão esta como false.

Importante saber que na realidade que todas as propriedades tanto em javascript quanto em data-* atributes são as mesmas, a diferença está na forma de passar estes parâmetros para a função Carousel(), e se por um acaso repetir uma propriedade por javascript e pelo data- * atributes a do data sempre prevalecerá sobre a do javascript.

Enfim era isso que eu queria mostrar, peguem todos os códigos aqui e modiquem ele, avisem dos bugs, rsrsrsr, pois como ainda é a primeira versão pode acontecer mesmo.

Então comentem, critiquem ou elogiem. Valew e até a próxima !!! =)