exemplos de utilização do cycle jquery

Exemplos-da-utilização-do-Cycle.markdown

Exemplos da utilização do Cycle

Demo

index.html

<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;

-->

script.js

// 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' 
});

style.css

.slides{
  width: 150px;
  height: 150px;
  border-radius: 10px;
  border:1px solid #000;
  overflow: hidden;
}

p{
  margin: 10px 0px;
}