Nivo Slider

Caracteristicas:

# 9 efeitos únicos de transição
# Marcação simples e facil

Nivo Slider foi testado com os seguintes navegadores:

* Internet Explorer v7 +
* Firefox v3 +
* O Google Chrome v4
* Safari v4

Como usar

Para usar o Nivo Slider você tem que incluir jQuery e o script Nivo Slider CSS em sua página:

<link rel=”stylesheet” href=”nivo-slider.css” type=”text/css” media=”screen” />
<script src=”jquery.min.js” type=”text/javascript”></script>
<script src=”jquery.nivo.slider.js” type=”text/javascript”></script>

Em seguida, você precisa adicionar alguns códigos HTML.
Note-se que para adicionar uma legenda que você simplesmente precisa adicionar um atributo de título para a imagem:

<div id=”slider”>
<img src=”images/slide1.jpg” alt=”" />
<img src=”images/slide2.jpg” alt=”" />
<img src=”images/slide3.jpg” alt=”" title=”This is an example of a caption” />
<img src=”images/slide4.jpg” alt=”" />
</div>

Finalmente você precisa para montar o seu script usando a função $(window).load():

<script type=”text/javascript”>

$(window).load(function() {
$(‘#slider’).nivoSlider();

});

</script>

O Nivo Slider tem muitas opções para mexer com seus efeitos e transições.
Abaixo está um exemplo do código com todas as opções disponíveis e seus padrões:

<script type=”text/javascript”>

$(window).load(function() {
$(‘#slider’).nivoSlider({
effect:’random’,
slices:15,
animSpeed:500,
pauseTime:3000,
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3…
beforeChange: function(){},
afterChange: function(){}
});
});

</script>

Os parâmetro de efeito pode ser qualquer um dos seguintes:

* sliceDown
* sliceDownLeft
* sliceUp
* sliceUpLeft
* sliceUpDown
* sliceUpDownLeft
* fold
* fade
* random

Fonte: Diego Galvão e Dev7Studios