Nivo Slider es un Slideshow de imágenes ultra liviano (5kb comprimido) hecho en JQuery.
Cuenta con 9 tipos únicos de transición, botones de anterior-siguiente y un control de navegación.
También es posible definir el periodo velocidad y pausa de la animación para un mayor control.
Exploradores Soportados: (Nivo Slider ha sido testeado en estos exploradores)
- Internet Explorer v7+
- Firefox v3+
- Google Chrome v4
- Safari v4
- Opera v10.5
¿CÓMO INSTALAR NIVO SLIDER?
Para usar Nivo Slider deberás incluir en tu header JQuery (si no lo tienes integrado ya) y el Script y CSS de Nivo Slider.
|
1
2
3
|
<link rel=“stylesheet” href=“nivo-slider.css” type=“text/css” media=“screen” />
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type=“text/javascript”></script>
<script src=“jquery.nivo.slider.pack.js” type=“text/javascript”></script>
|
Agregaremos el HTML para llamar las imágenes:
|
1
2
3
4
5
6
|
<div id=“slider”>
<img src=“images/slide1.jpg” alt=“” />
<a href=“http://dev7studios.com”><img src=“images/slide2.jpg” alt=“” /></a>
<img src=“images/slide3.jpg” alt=“” title=“This is an example of a caption” />
<img src=“images/slide4.jpg” alt=“” />
</div>
|
Finalmente escribimos el script usando la función $(window).load()y les dejamos una configuración de ejemplo:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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…
pauseOnHover:true, //Stop animation while hovering
beforeChange: function(){},
afterChange: function(){}
});
});
</script>
|
Diferentes tipos de efectos:
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- random