Skip to content

Instantly share code, notes, and snippets.

@thulioph
Last active December 23, 2015 14:49
Show Gist options
  • Save thulioph/6651019 to your computer and use it in GitHub Desktop.
Save thulioph/6651019 to your computer and use it in GitHub Desktop.
exemplos de utilização do cycle jquery
<p>slide automatico</p>
<div class="slides" id="slide-auto">
<img src="http://www.nivelepico.com/wp-content/uploads/2012/05/homem-de-ferro-3-novidades-2.jpg" />
<img src="http://www.nivelepico.com/wp-content/uploads/2012/05/espetacular-homem-aranha-trailer-2-1.jpg" />
<img src="http://i2.wp.com/www.geezbox.com.br/wp-content/uploads/2013/06/wide-e1372946843608.jpg?resize=150%2C150" />
</div>
<!-- Slide Automático -->
<p>slide com controles</p>
<div class="slides" id="slide-controles">
<img src="http://www.nivelepico.com/wp-content/uploads/2012/05/homem-de-ferro-3-novidades-2.jpg" />
<img src="http://www.nivelepico.com/wp-content/uploads/2012/05/espetacular-homem-aranha-trailer-2-1.jpg" />
<img src="http://i2.wp.com/www.geezbox.com.br/wp-content/uploads/2013/06/wide-e1372946843608.jpg?resize=150%2C150" />
</div>
<div id="controles">
<a href="#" id="next-slide">Next</a>
<a href="#" id="prev-slide">Prev</a>
</div>
<!-- Slide horizontal com controles -->
<p>slide com paginação automática</p>
<div class="slides" id="slide-paginacao">
<img src="http://www.nivelepico.com/wp-content/uploads/2012/05/homem-de-ferro-3-novidades-2.jpg" />
<img src="http://www.nivelepico.com/wp-content/uploads/2012/05/espetacular-homem-aranha-trailer-2-1.jpg" />
<img src="http://i2.wp.com/www.geezbox.com.br/wp-content/uploads/2013/06/wide-e1372946843608.jpg?resize=150%2C150" />
</div>
<!-- Slide vertical com paginação automática
¹Este exemplo gera paginação automática, de acordo com a quantidade de conteúdo incluído no alvo;
²Na chamada do javascript é utilizado o .after('<div id="nav">') para criar depois do alvo a paginação e inclui-lo na #nav;
³Para visualizar essa inclusão, é aconselhavel utilizar o developer tools do seu navegador;
-->
// Slide automatico
$("#slide-auto").cycle({
fx: 'fade',
speed: 2500
});
//slide horizontal com controles
$("#slide-controles").cycle({
fx: 'scrollRight',
speed: 'fast',
next: '#next-slide',
prev: '#prev-slide'
});
//slide vertical com paginação automática
$('#slide-paginacao').after('<div id="nav">').cycle({
fx: 'scrollVert',
speed: 'fast',
timeout: 0,
pager: '#nav'
});
.slides{
width: 150px;
height: 150px;
border-radius: 10px;
border:1px solid #000;
overflow: hidden;
}
p{
margin: 10px 0px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment