Nivo Slider, una fantástica forma de crear diapositivas / deslizante con miniaturas para nuestros proyectos online. Posee características particulares como 9 efectos de transición, se puede ajustar a nuestras necesidades, dirección y control de navegación, la versión sólo pesa 7kb, apoya la vinculación en imágenes, Teclado de navegación. Nivo Slider ha sido probado en los siguientes navegadores: Internet Explorer v7+, Firefox v3+, Google Chrome v4, Opera v10.5, entre otros.
Ver Demos - Info y Descarga Nivo Slider
Uso
<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>
HTML
<a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" /></a>
<img title="This is an example of a caption" src="images/slide3.jpg" alt="" />
<img src="images/slide4.jpg" alt="" /></div>
$(window).load() function:
$(window).load(function() {
$('#slider').nivoSlider();
});
// ]]></script>
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
slices:15,
animSpeed:500,
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
// ]]></script>
Otras Plataformas
Lo interesante es que nivo además podrá enconttarce para diversas plataformas, algo que ahorra tiempo a la hora de ser instalado.
Si desea utilizar el control deslizante de Nivo con Wordpress puedes seguir este tutorial que explica cómo configurarlo o utilizar el plugin para Wordpress Nivo Slider.
Descargue el Slider Nivo o Vista Nivo Slider módulos de Drupal.
Descargue el módulo de Joomla Nivo Slider (HU).
Loading ...
Tweets that mention Nivo Slider – jQuery Image Slider -- Topsy.com
05-06-2010
Permalink
[...] This post was mentioned on Twitter by Argentina Feeds, RADAGA Proc. Dados. RADAGA Proc. Dados said: RT: @ARfeeds: [Xyberneticos] Nivo Slider – jQuery Image Slider http://bit.ly/diY2lp [...]
Freeman
05-06-2010
Permalink
How do you do! Please e-mail me your contacts. I have a question gavin@trensavto.ru" rel="nofollow">......
Thank you!...
Mario
05-06-2010
Permalink
Precisamente algo asi estaba buscando para un theme de wordpress que estoy modificando.... pero al ponerlo se pone por encimade un menu despleglable que tengo y no me deja ver las opciones del menu.. a alguien le paso algo parecido... como lo solucionaron??
Muchas gracias por el post tambien esta fenomenal el script para html...
Un saludo...
Muebles Dany's
05-06-2010
Permalink
Hola Nikko lamento consultar esta duda en un post diferente pero necesito tu ayuda. Quisiera saber que plugin utilizas para mostrar la cantidad de vistas que tiene cada post.
Saludos
Nivo Slider – jQuery Image Slider- Noticias del Cerebro Digital
05-06-2010
Permalink
[...] mas en Xyberneticos.COM ..: Nivo Slider – jQuery Image Slider Tags: internet, jquery, scripts You can follow any responses to this entry through the RSS 2.0 [...]
David Costales
05-06-2010
Permalink
Realmente precioso, voy a ponerme a trastear con el ahora mismo. Buen aporte Nikko!.
Minipost #3 en davidcostales blog
05-06-2010
Permalink
[...] en los que nos proponen: un vistoso menú de navegación escrito en CSS3 y jQuery, además de un slider de imágenes basado en jQuery llamado Nivo [...]
Card Services International
05-06-2010
Permalink
Precisamente algo asi estaba buscando para un theme de wordpress que estoy modificando.... pero al ponerlo se pone por encimade un menu despleglable que tengo y no me deja ver las opciones del menu.. a alguien le paso algo parecido... como lo solucionaron??
+1
Yuanga
05-06-2010
Permalink
Buenas. He probado el código y el efecto funciona, pero no me aparecen ni los puntitos de navegación ni las flechas (en su lugar aparecen números en lugar de los puntos y texto en lugar de las flechas).
¿Alguien sabe cómo solventar esto?
¡Muchas gracias de antemano!
JULIO
05-06-2010
Permalink
Buy:Soma.VPXL.Viagra Soft Tabs.Viagra.Cialis Professional.Maxaman.Cialis Super Active+.Propecia.Cialis.Super Active ED Pack.Viagra Super Active+.Viagra Professional.Tramadol.Cialis Soft Tabs.Viagra Super Force.Zithromax.Levitra....
1
05-06-2010
Permalink
703 http://yoffice7q9.AACEHARDWARE.INFO/tag/b\x26w+1+703+speakers/ : 1...
1...