JQuery

Em por

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.

copyright epsoftware.com.br developed by Everton J Paula

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 !!! laugh

Veja Também:

Artigos Relacionados a categoria: JQuery

Olá, deixe seu comentário para Carousel (SlideShow) em Jquery

Enviando Comentário Fechar :/

...AINDA NÃO VIU NOSSO PORTFÓLIO?

Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite e veja agora mesmo e tenha um site de qualidade para o seu negócio!

[contato]
Ver o Portfólio Agora