Nivo Slider es uno de los mejores carruseles de imágenes que existen gratuitos. Esta escrito en jQuery y sus numerosos efectos visuales hacen de este uno de los más utilizados.
Su versión en jQuery es totalmente gratuita pero , sin embargo, existen otras 2 versiones para WordPress que funcionan bajo licencia de pago.
Nosotros sólo vamos a hablar de la versión jQuery que es la que más nos interesa.
Como decíamos, dispone de numerosos efectos visuales, mas concretamente, 16 efectos diferentes además de las típicas opciones de configuración como controles de navegación, autoiplay, flechas o tiempos de transición.
Por si esto fuera poco, dispone también de varios temas de apariencia para darle diferentes aspectos al carrusel según apliquéis uno u otro.
Su uso es muy sencillo y no requiere de nada en especial, se utiliza como cualquier otro plugin.
Si queréis ver un ejemplo de uso directametne podéis acudir a la página principal de nuestro sitio web y lo podréis ver en acción en el centro de la página.
Para utilizarlo debemos descargarnos el recurso completo del siguiente enlace: http://dev7studios.com/downloads/49
Vamos a ver como podemos usar este plugin.
Incluímos los componentes necesarios:
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
Incluímos el código HTML que se convertirá en el carrusel:
<div class="slider-wrapper"> <div id="slider" class="nivoSlider"> <img src="images/slide1.jpg" alt="" /> <img src="images/slide2.jpg" alt="" title="#htmlcaption" /> <img src="images/slide3.jpg" alt="" title="This is an example of a caption" /> <img src="images/slide4.jpg" alt="" /> </div> </div> <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
Y por último inicializamos el script:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
Como véis es muy simple de utilizar y no requiere de ningún conocimiento avanzado.
Este ejemplo ha sido sacado de la página oficial de Nivo Slider. Podéis acudir a ella si necesitáis saber todos los efectos de que dispone el carrusel.