Novidades100

CulináriaInternetDetonadosWallpapersPoesiasVideos

Criar Slides com o JQuery

Veja como Criar Slides Utilizando Jquery e o Plugin Jquery Cycle

Criar Slides com JqueryCriar Slides com JqueryCriar Slides com JqueryCriar Slides com JqueryCriar Slides com JqueryCriar Slides com Jquery

-

Aprenda a criar Slides utilizando o 'JQuery' e o 'Plugin JQuery Cycle' neste pequeno mas eficaz Tutorial.
Primeiramente você deve baixar a biblioteca do JQuery AQUI. Depois faça o download do plugin Cycle AQUI. Agora salve ambos em um diretório específico, exemplo js.
Agora tudo que você tem a fazer é digitar ou copiar o código abaixo em um editor de texto, depois salve-o como 'slide.html', então execute este arquivo com o seu navegador preferido (ele irá funcionar mesmo Off Line).

<html>
<head><title>Slides</title>
<style type="text/css">
*{width:100%;height:100%;margin:0px;padding:0px;text-align:center;}
#slides{width:250px;height:230px;background:#ff0;color:#fff;overflow:hidden;text-align:center;margin:0px auto;border:5px solid #2bf;}
a{color:#00f;font-size:130%;}
#slides img{width:250px;height:230px;}
#slides p{margin:0px;color:#ff0;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.03/jquery.cycle.all.min.js"></script>
<script>
$(function() {
$("#slides p").cycle({
fx: 'zoom',
speed: 1000,
timeout: 2000,
prev : '#prev',
next : '#next'
})
})
</script>
</head>
<body>
<div id="slides">
<p>
<img src="https://novidades100.com.br/gadget/web/images/001.jpg" title="imagem 01">
<img src="https://novidades100.com.br/gadget/web/images/002.jpg" title="imagem 02">
<img src="https://novidades100.com.br/gadget/web/images/003.jpg" title="imagem 03">
<img src="https://novidades100.com.br/gadget/web/images/004.jpg" title="imagem 04">
</p>
</div>
<p>
<a href="#" id="prev">Anterior</a> -
<a href="#" id="next">Pr&oacute;xima</a>
</p>
</body>
</html>

Customizando seu Slide

Para adicionar outras configurações, tipo tempo que cada imagem fica disponível, velocidade da transição, altere os trechos speed e timeout. O tipo de transição também pode ser alterado. Este que está no código acima é zoom. Aqui estão outros que você pode adicionar na linha fx: 'zoom' - scrollDown, scrollUp, scrollRight, scrollLeft, fade, fadeZoom, shuffle, turnDown, curtainX, etc.
Vejas Outras Opções Aqui
Obs: Você pode testar seu slide offline, bastando apenas salvar como slide.html e abrir com o seu navegador preferido. É necessário que os arquivos jquery estejam na pasta indicada no script e o arquivo de teste (slide.html) esteja junto ao diretório js.
Gerar Slides com Imagens da Internet

Slides, JQuery, Slide, Plugin, Cycle

Pressione CTRL + D para Adicionar Esta Página aos Seus Favoritos

Sobre o Autor| Política de Privacidade

Nosso site utiliza cookies e outras tecnologias para melhorar sua experiência ao utilizar nosso conteúdo, além de personalizar publicidades e outros serviços de acordo com seus interesses.