A la fecha de este tutorial la versión de Nivo Slider es la 3.2 y la de jQuery es 1.9.1
Nivo Slider es sino el mas popular, uno de los plugins de jQuery de transición de imágenes mas conocido y propagado en la red, en este tutorial te enseñare los pasos necesarios para implementar Nivo en tu página Web.
Preparando el entorno
Para el ejemplo usaremos un entorno como el de la imagen, donde tenemos un documento .html, una carpeta para los .css, una para los .js y una carpeta de imágenes, aqui habrán 4 imágenes de ejemplo (slide1.jpg, slide2.jpg…).
Ahora procedemos a descargar Nivo desde su sitio oficial, al descomprimir el .zip obtendremos una lista de ficheros/carpetas, seleccionamos los siguientes:
Los copiamos a la carpeta donde donde esta nuestra página Web, ubicamos cada fichero en su carpeta correspondiente (js > /js y css > /css), la carpeta ‘themes’ la dejamos en la raiz.
Nota: Puedes optar por copiar la versión comprimida de Nivo (jquery.nivo.slider.pack.js), pero para el ejemplo usaremos la versión completa para poder usarla de referencia.
Estructura HTML
Ahora abrimos el documento HTML donde irá el slider y empezamos con una estructura básica:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo Nivo</title>
</head>
<body> </body>
</html>
Dentro del <head> incluimos los archivos CSS y al final (antes de cerrar el </body>) los JS de Nivo y jQuery, este ultimo lo obtenemos mediante el CDN de Google (si prefieres puedes bajarte jQuery e incluirlo de forma local).
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo Nivo</title>
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
</head>
<body>
<!-- Aqui irá el slider -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.js" type="text/javascript"></script>
</body>
</html>
Ahora creamos el contenedor para nuestro Slider, este llevará la clase ‘slider-wrapper’ (es muy importante mantener estos nombres de clases ya que esto nos servirá para trabajar con los themes), dentro otro div con id de ‘slider’ y clase de ‘nivoSlider’ y por último, dentro de este, las imágenes:
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="img/slide1.jpg" />
<img src="img/slide2.jpg" />
<img src="img/slide3.jpg" />
<img src="img/slide4.jpg" />
</div>
</div>
Al final (antes de cerrar el </body>) abrimos un <script> donde vamos a:
- 1. Envolver todo en: $(window).load(function(){ … }), esto hace que Nivo sólo se ejecute cuando la página y las imágenes hayan terminado de cargar.
- 2. Seleccionar al slider mediante id: $(‘#slider’)
- 3. Ejecutar la función nivoSlider sin ningún parámetro: .nivoSlider();
<script type="text/javascript" type="text/javascript">
$(window).load(function(){
$('#slider').nivoSlider();
});
</script>
Ahora si probamos esta página en el navegador ya deberiamos ver el slider funcionando:
Sin embargo el slider tiene un problema: por defecto ocupa todo el espacio disponible (width: 100%), esto lo arreglaremos con CSS, abrimos una etiqueta <style> (lo recomendable es hacerlo en tu propia hoja de estilos), seleccionamos al div contenedor (.slider-wrapper), le definimos un ancho fijo y lo centramos, asi el ancho del slider sera 100% de 960px.
<style>
.slider-wrapper{
width: 960px;
margin: 100px auto;
}
</style>
Themes
Ahora ya lo tenemos centrado y funcionando, pero no se ve tan bien, y esto es debido a que estamos usando Nivo en su estado mas elemental, si os acordaís al principio, copiamos tambien la carpeta /themes, allí es donde estan los CSS e imágenes que le dan la apariencia a Nivo.
Para usar los themes primero tenemos que incluirlos, esto es bastante sencillo, solo llamamos el .css principal de cada theme mediante la etiqueta <link> como cualquier otra hoja de estilos:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo Nivo</title>
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
Nota: no es recomendable incluir todos los themes todo el tiempo, prueba cada uno y cuando elijas el que quieras borra el resto.
Ahora lo único que tienes que hacer es definir el theme que quieras usar, esto se hace añadiendo la clase correspondiente al div contenedor, por ejemplo si queremos usar el theme ‘light’ simplemente le ponemos la clase ‘theme-light’ al div contenedor (.slider-wrapper):
<div class="slider-wrapper theme-light">
<div id="slider" class="nivoSlider">
Parámetros de nivoSlider()
Nivo funciona perfectamente sin ningun parámetro, sin embargo si quieres tener un poco mas de control sobre el slider puedes modificarlo a tus necesidades mediante las opciones que nos brinda:
$('#slider').nivoSlider({
effect: 'random',
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
prevText: 'Prev',
nextText: 'Next',
randomStart: false,
});
Los valores definidos en el codigo de arriba son los parametros por defecto, a continuación listare cada uno de estos, que tipo de valor acepta y para que sirve.
- effect: texto, define el tipo de animación del transición, puede ser: sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse
- slices: numero, define el numero de ‘slices’ o cortes para el tipo de animación ‘slice’.
- boxCols: numero, el numero de columnas para el tipo de animación ‘box’
- boxRows: numero, el numero de filas para el tipo de animación ‘box’
- animSpeed: numero (milisegundos), la velocidad de la animación
- pauseTime: numero (milisegundos), el tiempo de pausa entre transición y transición
- startSlide: numero, esto define con que imagen empieza el slider, empezando por el 0
- directionNav: true/false, define si aparecen o no las flechas de anterior/siguiente.
- controlNav: true/false, define si aparece o no la navegación numerica de abajo
- controlNavThumbs: true/false, este parámetro solo tiene efecto si ‘controlNav’ esta activado, si le pones true a este, lo que hara es reemplazar a la navegación numerica por una navegación de miniaturas, pero para que funcionen las miniaturas es necesario asignarle el atributo ‘data-thumb’ e indicarle que miniatura utilizar en cada una de las imágenes, por ejemplo: <img src=img/slider1.jpg data-thumb=img/slider1_thumb.jpg />
- pauseOnHover: true/false, define si al pasar el cursor sobre el slider este se detiene o no.
- manualAdvance: true/false, define si el slider tiene avance manual o automático, por defecto este parámetro es false (avance automático).
- prevText: texto, el texto del boton para ir a la imagen anterior, no tiene efecto si es que usas uno de los themes ya que este es reemplazado por una imagen
- nextText: texto, el texto del boton para ir a la imagen siguiente, igual que el parámetro anterior, si usas un theme no habra mucho cambio.
- randomStart: true/false, si le pones true; la primera imagen del slider será aleatoria (si este parámetro es true, anula ‘startSlide’).
Captions
Se le conoce ‘caption’ (la traducción literal es subtitulo) al texto acompañante de cada imagen del slider, pueden ser texto simple o HTML. Para definir un caption lo hacemos usando el atributo ‘title’ de la imagen, hay dos formas de hacerlo:
Directamente
La forma mas simple de hacerlo:
<img src="img/slide1.jpg" title="Hola mundo" />
Tambien podemos pasarle HTML:
<img src="img/slide1.jpg" title="<p>esto es codigo HTML.</p>" />
Externamente
Este método es útil cuando queremos usar captions complejos con alto contenido HTML y no queremos tener la limitación de trabajarlo en una sola linea, la idea es hacer el caption libremente en otro lado y luego, en el slider hacerle referencia mediante el id que le definamos, por ejemplo digamos que tenemos un caption con un id de ‘caption1’:
<div id="caption1">
<h3>Hola, esto es un caption HTML</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, quos, perspiciatis maiores saepe sit quidem quisquam cumque voluptas similique magni distinctio enim fugiat blanditiis qui esse. Ea, accusantium ipsa odio?</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, eveniet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, dolorum?</li>
</ul>
</div>
Luego, en la imagen del slider que queramos que tenga este caption simplemente lo llamamos mediante atributo title ‘#caption1’:
<img src="img/slide1.jpg" title="#caption1" />
Código Final
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo Nivo</title>
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<style>
.slider-wrapper{
width: 960px;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="slider-wrapper theme-light">
<div id="slider" class="nivoSlider">
<img src="img/slide1.jpg" title="<p>Esto es un codigo HTML</p>" />
<img src="img/slide2.jpg" title="#caption1" />
<img src="img/slide3.jpg" />
<img src="img/slide4.jpg" />
</div>
<div id="caption1" style="display: none;">
<h3>Hola, esto es un caption HTML</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, quos, perspiciatis maiores saepe sit quidem quisquam cumque voluptas similique magni distinctio enim fugiat blanditiis qui esse. Ea, accusantium ipsa odio?</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, eveniet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, dolorum?</li>
</ul>
</div>
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.js" type="text/javascript"></script>
<script type="text/javascript">
$('#slider').nivoSlider({
effect: 'random',
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
prevText: 'Prev',
nextText: 'Next',
randomStart: false,
});
</script>
</body>
</html>
Si tienes alguna duda hazmela saber en los comentarios, puedes probar el ejemplo de este tutorial en esta dirección o bajarte el código fuente de esta otra.
Hola, estoy intentado ponerlo en una web que estoy haciendo pero no me sale nada, me sale en blanco la pantalla, tengo otras galerias en otras paginas de la web con otros jss diferentes, es posible que me den conflicto? estoy mirando como solucionarlo pero no me sale nada, tengo todos los archivos subidos, en sus carpetas pero me aparece en blanco, he probado poniendo los parametros tanto en la cabecera, como en el index debajo de los divs,
la web es esta: http://formulario.leptica.com/index.php?
gracias
saludos
acabo de conseguirlo, tenia un batiburrillo de códigos increible, saludos!
no no me iba, si me va el nivo, se me quitan las otras galerias, algo me da conflicto..
voy a llenar esto yo solita..,
al final la solución estaba en que tenia dos jquery-1.7.1.min.js de versiones diferentes, he borrado uno y ya va perfecto, saludos
Gracias por presentarnos tu problema. He visto tu página y he visto que lo has configurado bien.
Éxitos.
hola esta muy buenos tus ejemplos de Slider, ya lo monte a mi pagina que estoy realizando, lo adapte a mis necesidades,solo tengo una duda ?, en que parte del codigo se edita le tamaño de la tabla del Slider.,,,, espero respuesta sañudos…
Lo puedes realizar desde cualquier parte del código css de tu web. sólo debes fijarte en los selectores que estás usando. en este caso #wrapper, .theme-default y .nivoSlider.
Excelente!
Gracias
No queda igual, por favor si vas a subir un tuto trata de hacerlo bien porque solo logras confundirnos a los que recien empezamos.
Perdon si te molesto lo de arriba, no fue con mala intención. Te falto esto al css
.theme-default .nivo-controlNav {
bottom: -42px;
left: 50%;
margin-left: -40px;
position: absolute;
}
.theme-default a.nivo-nextNav{
background-position: -30px 0;
}
.theme-default .nivo-controlNav a.active{
background-position: 0 -22px;
}
ya está muy usado :/
Es cierto, por eso aveces uso jCarousel en vez de Nivo.
Hola a todos:
En la página cuando intento validar el W3C, me da el siguiente error:
document type does not allow element «link» here
…/jquery/nivo/css/nivo-slider/nivo-slider.css» type=»text/css» media=»screen» />
esta linea es la siguiente:
<script type="text/javascript" src="/includes/jquery/nivo/jquery.nivo.slider.pack.js» language=»javascript»>
<link rel="stylesheet" href="/includes/jquery/nivo/css/nivo-slider/nivo-slider.css» type=»text/css» media=»screen» />
y no se como solucionarlo, pls ¿Podeis ayudarme?
Gracias
Hola , vi este tutorial eh intente implementarlo en una web, pero esta tiene tablas y quiero que el nivo quede en el centro :S como puedo hacerlo?
Gracias
Usa CSS para centrarlo, o para centrar la tabla que contiene al Slider 🙂
Muy agradecido por este tutorial seguí todos los pasos y funciona perfectamente, lo incorporé en la web de un amigo… http://www.mqsurf.cl
hola, muy bueno el tuto,, tengo ya implementada en un blog de prueba pero, hay un detalle, tengo solo en el html 3 imágenes pero se muestran 6 puntos en la parte inferior, no logro encontrar el problema, haber si me puedes ayudar con esto, de antemano gracias por el tiempo dedicación y trabajo. este es mi blog de prueba. http://fegasac.blogspot.com/2012/03/la-leyenda-de-la-imagen.html
hola, estoy tratando de insertar el nivo en una web cms (IMPRESSPAGES) y cuando voy a otras secciones es como si se desconectara. alguna pista de como solucionarlo?
Ante todo dar las gracias por el tutorial, me ha venido genial, pero tengo un problemita, a ver si podeis ayudarme.
La galería me va genial cuando la inserto en mi página, pero cuando la pongo dentro de un tab no me muestra las fotografías. ¿Alguien sabe qué puedo hacer?
Revisa si las imagenes tienen su extensión correspondiente (.jpeg, etc.) o si el tamaño de estas coincide con los tamaños que pusiste en el CSS.
hola alli indicas muy bien el tutorial pero como se hace en el caso de que quieres colocar el slide en una pagina web ya hecha y quieres ponerlo en el index de la pagina de modo integrado y no mediante frame
cambie toda la direccion de las imagenes en todos los archivos pero cuando lo implemento en mi web logrop ver es una sola imagen de todo el slide. y todo esta bien
se puede instalar en codeingniter o hay algun problemas
Claro! se puede hacer, de hecho existen varios tutoriales en la web, uno de ellos.
http://dillieodigital.wordpress.com/2011/08/18/ntegrating-the-nivo-slider-into-a-codeigniter-site/
Saludos amigos, disculpen la broma pero quien me podría ayudar a colocar el ancho y largo acorde a mi pagina ??? que e volteado el CSS por todos lados y nada que logro solucionarlo… se les agradece la ayuda…
Saludos amigos, disculpen la broma pero quien me podría ayudar a colocar el ancho y largo acorde a mi pagina ??? que e volteado el CSS por todos lados y nada que logro solucionarlo… se les agradece la ayuda…
Buenas, compañeros!
Yo he pegado el nivo en un WordPress, y he hecho que salga el título en vez de el nombre de la imagen.
Pero me da un error, como si la página estuviese codificada en el utf-8…
Soluciones? Es por el archivo php?
Primero que nada felicitar por la gran labor realizada, es un muy buen aporte el que hacen aqui, por lo cual paso a lo siguinete una pequeña duda que me deja;
¿Hay manera de modificar el tamaño del slide o esta dado por el tamaño de las imagenes?
con CSS puedes modificar el tamano del slide y el de las imagenes, fijate en las clases de nivo.
el nivo me parece genial pero no lo he podido reducir el tamaño, exactamente en cual clase se le cambia el tamaño o en cual archivo css
Felicitaciones por el tremendo aporte que hacen con los que estamos aprendiendo a hacer paginas web. Tengo 2 preguntitas que hacer:
1ra. Puedo eliminar la leyenda (Puntitos negritos de abajo)??
2da. Se puede poner un en la parte de abajo como una sombra que parezca efecto 3D??
Gracias. y que sigan los éxitos.
Logre que funcionara y eso que no se programación web ni nada de eso, basta seguir los pasos para que funcione, no he querido meterme muy a fondo para no regarla pero vuelvo a comentar que me funciono tal como se explica. Mi Web se verá un poquitin mejor con este efecto aunque aprendiendo unas cuantas cosas extras podré meterle mas efectos y funciones.
Tengo una duda, hay que actualizar el jquery? He visto la versión 1.7.2 y no se si deba cambiarla por la 1.7.1 que tengo instalada.
Muchas gracias.
Mientras el plugin del «nivo» no se actualice e implemente carácterísticas que requieran de las nuevas implementaciones del Jquery, no es necesario actualizarlo.
Tengo otra duda, como puedo hacer que las imágenes aparezcan en medio de mi Web?.
Intente con … en mi página principal pero no lo logré supongo que tengo que moverle a otro archivo pero no sé si es el «default.css» u otro.
He logrado ponerlo en el centro modificando «margin: 0 auto;», no me habia percatado de esta linea así que ya quedo listo pero me surgio otra duda.
Las imágenes que he puesto son 468×60 y tienen enlaces sin embargo las flechas ocupan exactamente la mitad, de que forma tengo que acomodar el «default.css» para que ocupen una zona menor por ejemplo 1/4 en lugar de 1/2? O es mejor aumentar la altura de las imágenes por ejemplo 468×90?
Si aumento el alto de las imágenes, la zona de flechas va a seguir tomandome la mitad de la zona para avanzar o retroceder o me va a dar más margen para poder hacer clic en el enlace (en la imagen)?.
Espero haberme explicado.
Hola che me salio 😀 mi pregunta es si se puede colocar en adobe muse?
Hola, intente hacerlo pero fracase rutundamente. Tengo un blog en blogger, los procedimientos son los mismos? Basicamente no entendi como empezar jaja. Esos codigos donde los tengo que poner exactamente? Si alguien lo hizo por favor escribame asi me ayuda, gracias!
ey nicolas los procedimientos son los mismos 🙂 yo lo hice y me salio XD el problema es que no se como ponerlo pero en blogger es mas sencillo agregame si queres y veo como te ayudo principe.rock@hotmail.com 😛
En blogger no sé pero quiero suponer que las lineas son las mismas que las de una página Web. Yo seguí los pasos tal cual y no tuve ningún problema para su implementación, en lo que debes de fijarte bien es en las direcciones que llevan los archivos por ejemplo el «default.css», el «jquery 1.7.1», etc. que tal vez por ahí podría ir el problema. Hazlo con calma aunque te tarde 20 o 30 minutos, si funciona.
Estoy intentando colocar un logo al lado del Nivo Slider pero no se como hacerlo ya que los dos elementos no son de la misma naturaleza, tambien me gustaria incluir el logo en forma transparente dentro del Nivo Slider
pero tampoco se como.
una forma de hacerlo es que trates de poner una marca de agua en las imágenes que vas a mostrar en el nivo, con la imagen del logo que desean poner.
La otra forma de hacerlo, podría ser que pongas la imagen del logo en la misma posición del nivo utilizando las propiedades de css3 position: relative, dandole un z-index mayor al logo.
bueno hasta hora leo tu duda y rápidamente se me ocurren esas dos formas.
Éxitos.
sucede que quisiera poner el mismo slider 2 veces en la misma pagina pero con diferente contenido. Pero esta pasando algun conflicto. Copie exactamente el mismo contenido y se ve el slider pero no funciona. La funcion del script solo aplica con el primero. Intente duplicando el script y cambiandole el id, pero no me funciona.
Espero que alguien me ayude porque esto me sucede con otros plugins de jquery tambien.
Saludos
Y te seguirá pasando ya que hay objetos que tienen un id, y no una clase, lo que quiere decir es que las propiedades aplicadas a un determinado id no serán asignadas a otro que comparta el mismo nombre.
Éxitos.
Pero el segundo slider que hice le cambie el id, para diferenciarlo y aun sigue igual :s, me gustaria ver un ejemplo de este mismo slider en un mismo documento 2 veces con diferente contenido.
Gracias por tu ayuda.
¿Sólo lo cambiaste? si es así, no te va a funcionar. También debes tener en cuenta modificar los scripts y css que sean necesarios para que reconozcan el nuevo id y le otorguen las características necesarias.
En cuanto al ejemplo te lo debo. Aunque como remomendación, no es buena idea utilizar tantos scripts de éste tipo para una misma página, por razones como: el de tiempo carga de la página, no se ve bien que digamos, tanto dinamismo del mismo tipo. y otros…
Éxitos.
Se me ocurre que talvez lo hagas de la siguiente manera, para que no se complique tanto.
Ponga un slide en la pagina que usted desea y para poner el otro, los haces pormedio de un include() php o un html
esto no lo he probado pero considero que se puede hacer sin problema alguno. me inclino más por el porque creo que el include traería los mismo id’s al documento, por eso quizá te va mejor haciéndolo con
Discula hubo una palabra que no me dejó pasar el formulario de comentarios, ya que la había puesto como una etiqueta html, la palabra era iframe, es decir, include o iframe.
buenas tardes muchas gracias por el nivo slider.
Mi pregunta es : como agrego el nivo slider a mi pagina web antes del menu desplegable y muchas gracias
segui el tutorial paso a paso pero no me sale nada ni la galeria ni ninguna imagen /:
Hola que tal buenas onches, he estado tratando de implentarlo pero no me sale como se presenta en el demo. mi pregunta es la funcion $(‘#slider’).nivoSlider({,… esa donde se coloca?? o si no se coloca.. por toro lado el archivo css, dices por ejemplo
/* lo modificamos por background:url(../images/bullets.png) no-repeat;*/
pero yo veo que el archivo default.css esta igual ojala y me puedas conestar . mcuhas gracias
Gracias por tu trabajo…y ahora una preguntita:
No consigo que nivo me muestre textos con las imagenes; ahora mismo, en la pagina tengo montado en la etiqueta ALT y con nivo-html-caption ….pero no aparece ni un solo texto; a alguien se le ocurre porque?
Hola, tengo una simple duda, cómo hago para setearle que todas las transiciones sean con el efecto «slide»? (La que se desvanece).
Muchas gracias!
Listo, ya lo he solucionado!
Hola Nicolas,como lo has hecho,podrias postearlo =) gracias
Como lo hiciste? . . estoy tratando de fijar solo un efecto y no puedo. . . de antemano gracias : )
la que se desvanece es ‘fade’
hola!! gracias por el ejemplo, tengo un problema, ya he puesto el slider de fondo, pero cuando quiero poner otra imagen en la pagina no me aparece, me podrías decir como solucionarlo.
Gracias y esperaré tu ayuda.
Hola Alexis ! podrías ayudarme a configurar este slider para que tenga otro comportamiento?
necesito que cuando el ratón esté sobre el slider, las imágenes pasen a una cierta velocidad en modo fade, y cuando el ratón salga del área del slider, las imágenes paren y se quede fija en la ultima que se ha visto. Sin bulet, sin flechas, sin caption…podrías orientarme? muchas gracias de antemano!!
Hola Pablo, la verdad no estoy seguro que el nivo traiga esas funciones por defecto, aunque puedes investigar en su página oficial.
En caso de que no consigas documentación, lo que tu deseas seguro lo consigues con jQuery, pero para ello debes saber usarlo. una idea que se me ocurre es la siguiente:
$(«.class»).mouseenter(function(){ //cuando el cursor entre del div contenedor
$(‘#slider’).nivoSlider({
animSpeed: 200, //y modificas el valor ya sea mayor o menor
});
});
$(«.class»).mouseleave(function(){ //cuando el cursor salga del div contenedor
$(‘#slider’).nivoSlider({
animSpeed: 200, //y modificas el valor ya sea mayor o menor
});
});
puedes documentarte aún más en : http://api.jquery.com/mouseenter/
Éxitos
Hola a todos.
Darinka, dentro de las funciones que se explican en el tutorial, existe otra que sirve para coseguir lo que quieres:
effect:’random’, //Especifica cualquiera de los siguientes efectos: ‘fold,fade,sliceDown’
Espero te sirva.
Éxitos…
Hola!!, Muchas gracias =D. Tienes tutos en facebook o solo por aqui para seguirte el paso =).
Disculpa . . . esa linea se agrega al CSS del slider o hay que buscarla en el jquery y editarla? . . . disculpa mi torpeza pero soy novato . . . gracias! : )
En el archivo JavaScript.
Muchas gracias!
Mil gracias Alexis! indagaré sobre ello
hola que tal tu tuto esta genial, lo coloque y funciona pero al poner cosas debajo de el slider me crea un margen como de 60 pixeles,,la pregunta es ¿como eliminar el margen debajo del slider?
Me paso lo mismo, lo que puedes hacer es ponerle un margen inferior de -60px o al contenido de bajo ponerle un margen suprior de -60px
gracias por el tip, pero eso de margen -60 en donde se lo puedo poner? en donde tiene el superior?
wowww si, era eso.. gracias!!
.slider-wrapper {
width: 100%;
margin: 20px auto;
margin-bottom:-60px;
}
hola, podrias ayudarme, copie el codigo en mi pagina con estilo css, he podido cambiar el tamaño de la imagen, pero no poder centrarla o alinear a mi pagina que es de 960 de ancho
Puedes crear un contenedor de 960px de ancho y ponerle un margen izquierdo y un margen derecho en auto de esta forma:
·contenedor{
width:960px;
margin:0 auto;
}
hola, cómo hiciste para cambiar el tamaño de la imagen?
hola!!
He puesto el slider de fondo, pero las imagenes no cubren todo la pagina, me deja un margen superior y del lado izquierdo.
Me puedrian ayudar…
Posiblemente necesites las imagenes de mayor tamaño y ponerle al slider un margin:0;
hola, ya tengo implementado el slide en mi pagina, uso dreamweaver para editar el los css pero no se como editar o mejjor dicho como abrir los archivos .js para editar boxrow y agregar mas que solo 4 opciones….te agradecere tu ayuda–
del mensaje anterior, quiero agregar mas bullets no boxrows gracias
Antes que nada saludarlos!!
Tengo un problema muy sencillo, los bullets me quedan a mano izquierda y no he podido centrarlos…
Un abrazo y muchas gracias!!!!!
Muchas gracias! Realmente me ha sido muy útil, super facil y muy bien explicado. sin complicaciones! Saludos desde Uruguay.
hola tengo un problema como hago para que las letras del captin aparescan a la derecha en forma de cascada y la imagen al lado de la letra osea que la imagen no este arriva sino a la izqyuierda y las letras a la derecha saludos espero pronta repuestas ..
Hola!!
Alguien me podría decir como ajustar el tamaño de las imagenes para ajustarlas de acuerdo al ancho de la ventana del navegador para que no aparezca la barra de desplazamiento horizontal.
Saludos, tengo una pregunta, yo tengo una version de nivo slider que me funciona de maravilla, mi problema es el siguiente, quisiera saber como puedo hacer para que se ejecute automaticamente al cargar la pagina o al iniciarse, osea que no me aparesca la pregunta de si decea activar este activeX, he visto que se puede cargar una funcion o un script automaticamente con jquery pero la verdad no logro ubicar el nombre de la funcion para llamarla, quisiera saber si alguien tiene algun metodo para esto o podria indicarme como podria hacerlo, o si las versiones actuales tienen incorporado esto les agradeceria una respuesta, mi correo es alvaro_xp7@hotmail.com
salud2
Quedó excelente, pero en algunas imágenes, me separa el Top de imagenes que corresponde al nivo, del Div siguiente que corresponde al menú superior de mi sitio Web. Queda un pequeño espacio. Todas las imágenes tienen la misma resolución, pero algunas veces me las separa y me queda un espacio transparente.
Alguna sugerencia?
Hola amigos, estoy recien aprendiendo Css3 y sus transisiones de imagenes.
Inserte en el body section el nivo qu3 aqui usan y me funciona de maravilla, el problema lo tengo cuando mas abajo de la seccion enotro parte de la pagina quiero usar mas transisiones de las imagenes, no lo hace y muestra cada imagen una a una en diferentes lineas, viendose fatal.
¿alguna idea?
Gracias por su ayuda.
No sé que hago mal pero las 2 flechas miran para el mismo lado y los circulitos de abajo quedan a la izquierda y no se van redondeando en función de la imagen por la que va pasando http://www.aspa.net/webaspa/not_SET_2012.htm
Si alguien me ayuda se lo agradezco
Gracias
Añade esta clase en alguna hoja de estilos enlazada a tu pagina:
.nivo-nextNav{
background-position: -30px 0px;
}
Hola Josue,
¿Dónde lo añado? ¿Al final de este fichero: ..styles\nivo-slider.css ?
Lo he añadido ahí y en ..styles\default.css pero no me cambia nada.
Es que no soy programador y todo esto se me hace un pelín complicado.
Mil gracias!!!
me pasa exactamente lo mismo que a ti gonzalo y coloco la clase que te dijo josue y no pasa nada queda igual :/ , josue si puedes me echas una mano con eso por favor.
Esos estilos funcionaban en su ejemplo (hasta donde lo probe con el dev tools) con la imagen que tenia como flechas, pasame la URL donde lo estas probando a ver si puedo ayudarte.
Hola, tengo nivo implementado en esta página http://www.vamonosdevacaciones.com.ve pero hace que se tarde mucho la pagina en cargar. Yo llamo las fotos con una ruta que está en la base de datos para que las busque en una carpeta. Cómo puedo hacer para que no tarde tanto en cargar. Gracias.
Alli la vi y cargo normal.
cómo hago para que la imagen mida 1100px por 200px??
cómo hago para que la imagen mida 1100px por 200px???
Hasta donde se el ancho es automatico, solo pon la imagen y va a ajustarse, tal vez el alto lo tengas que definir por CSS (.slider { height: 200px; } )
Exelente la mejor explicación despues de buscar tanto
Muchas gracias-
Me sale todo, menos una cosa que las flechas están estáticas no desaparecen, quiero que cuando carguen estén ocultas y cuando el puntero esté sobre el slider aparescan
Este parametro controla eso:
directionNavHide: true/false
Oi amigo,
estou no Brasil e a tempo procuro um tutorial que explicasse bem a instalação do Nivo,
Parabéns!!!
O seu foi o melhor.
Ivo
🙂
Hola otra vez. Consigo que me salgan las imagenes en mi pagina pero me salen todas juntas una debajo de otra. Como podria solucionarlo? Muchas gracias por todo.
Un saludo
Hola.. fue de mucha ayuda toda esta información me sirvió perfectamente, solo necesito saber en que parte puedo modificar los textos que me muestra al ejecutarse… me Ayudaria mucho sus respuestas.
Gracias..
Te refieres a los captions? se definen mediante el atributo title en el elemento img, pueden ser en linea (title=»texto») o HTML (title=»#html») donde #html iria en un div separado, puedes leer mas sobre en eso la documentacion oficial
hola me podrian decir porque e pasa esto?
https://lh5.googleusercontent.com/-Kmvx_bSihas/UK8X0cJAEpI/AAAAAAAAAHw/us6f1LWYlB0/s950/ssssssssssssss.JPG
estoy utilizando el tema light tengo la version de jquery 1.7.1 soy nuevo en esto y pues no se que pasa :I ojala pudieran ayudarme muchs gracias
Me es dificil ayudarte con solo una imagen, subela a un servidor.
Hola.
Yo tengo el siguiente problema: en el div slider, donde se indican las imágenes a mostrar, no consigo que todas las imágenes sean del mismo tamaño.
Osea, si pongo imágenes que son todas del mismo tamaño, perfecto: se produce la transición entre ellas y queda bien.
Pero si una imagen es de otro tamaño, no puedo forzar su tamaño usando width y height porque lo ignora.
Aunque en las imágenes del div slider ponga a todas el mismo width y height, no hace ni caso.
¿Alguna idea?
Gracias!
Modifica el width de las imagenes con CSS, a mi me funciona asi:
div.slider img{
width: 450px !important; // si es necesario, ponle !important
}
Gracias Josue…, pero me temo que no funciona.
En el fichero nivo-slider.css ya tengo un estilo para las imágenes en la clase slider:
#slider {
position:relative;
width:940px;
height:194px;
background:url(./images/nada.jpg) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
Le he puesto otro como comentabas, y he probado a quitar el que había, quitarle lo de display: none, etc…, pero no sale…
Pasame el link donde lo estas probando.
Hola Josue.
No quiero abusar de tu amabilidad, con lo que si tienes otras cosas que hacer, olvida este tema y no le des vueltas.
He dado con otra librería que sí que parece que permite redimensionar las imágenes, aunque no tiene transiciones tan vistosas.
Pero si quieres intentarlo, la dirección es esta:
C:\mio\WEB\roimagroup\web\111.htm
La página 111.htm muestra 4 imágenes que se alternan en una transición de cuadrados. La imagen 4_tira_retencion.jpg es de un tamaño menor…, pero ahora ni siquiera se llega a mostrar (he hecho tantos cambios que ya ni sé 😉
Las librerías que usa son jquery-1.4.3.min.js y jquery.nivo.slider.pack.js
Los estilos están en nivo-slider.css
Si echándole un vistazo ves dónde está el problema, genial. Pero si no, insisto en que no te compliques.
Aun así, mil gracias!
Hola David, el problema es que la dirección que me haz dado es local, osea esta en tu ordenador, no la puedo ver :/
Vaya torpeza, perdona…
Esta es la URL: http://www.roimagroup.com/111.htm
No existe esta imagen
http://www.roimagroup.com/images/arrows_no.png
Perdonen soy muy nuevo en esto de pàginas web, se que es un pocoestupido pero no consigo que el slider me quede centrado en la pagina, alguen podria ayudarme porfavor.
gracias!
Envuelvelo en <center></center>
perfecto!, gracias
hola he visto tu tutorial y la verdad que estoy muy agradecido esta muy bien explicado lo que no entiendo es para que me sirve. estoy buscando como google me indexa mi pagina el problema que tengo es el siguiente. En cada pagina de mi web http://www.libreriausados.com.ar tengo dos fotografias una del logo y otra del libro que tengo a la venta pero cuando lo publico facebok me aparece publicada la pagina con el logo. desde ya agradezco su ayuda
Bueno, la pregunta no tiene que ver con el tema pero te puedo ayudar porque se la solucion (creo):
Cuando Facebook publica algo compartido busca la primera imagen y la pone como thumbnail, sin embargo puedes definir una imagen especifica mediante el siguiente elemento, debes poner en el <head>
Hola muchas gracias por tu respuesta.
Soy muy malo con el tema de codigos me podrias hacer el gran favor de entrar a mi web y ponerme un ejemplo.
http://www.libreriausados.com.ar
Muchas gracias
Supongamos que quieres compartir esta pagina http://libreriausados.com.ar/item16322.html
Tendrías que añadir esto entre las etiquetas head:
por que no me muestra el control manual? ni flechas, ni los circulos de debajo
Tal vez lo tengas desactivado en los parametros o tal vez no estas cargando el CSS de Nivo.
no puedo avanzar
entre head i head pego el texto que pone en el tutorial pero el dreamweaver me dice error de sintaxis en la linea 4… y si continuo no se ve nada…
Hola como están, quería preguntar si el Nivo Slider jQuery Plugin se puede descargar y usar o hay que solicitar alguna licencia?
Saludos y muchas gracias por la información.
Flabio
El plugin de jQuery es de licencia gratuita: http://nivo.dev7studios.com/pricing/, el de WordPress no.
Hola Josue, necesito colocar dos nivo en una misma página, cual sería la forma más practica de hacerlo?
Desde ya muchas gracias por tu valiosísimo aporte
Igual como si lo hicieses con 1 Nivo, lo unico que haces es duplicar el HTML, duplicarlo en el JS no seria necesario y si lo haces podría relantizar mas la carga, a menos que quieras que el segundo Nivo tenga algún efecto especial que se lo defines alli en los parametros:
Y en el JS:
$(".slider").nivoSlider({
});
que tal, oye una duda, como puedo hacer para hacer mas pequeño la barrita negra en donde esta la descripcion del texto, quisiera hacerla mas ancha, de antemano gracias!!
La clase que controla eso es .nivo-caption
Buen día, Don Josué la pregunta puedo usar Nivo para implementarlo en una página que muestre información sobre un hotel, es decir si lo puedo implementar en una página comercial?
Si, Nivo esta bajo la licencia MIT, la cual te permite hacer uso comercial del Software.
http://es.wikipedia.org/wiki/MIT_License
Gracias por la explicación y el aporte. saludos desde El Salvador
Hola Josué, gran tutorial.
Yo me pelee durante mucho tiempo con Nivoslider para conseguir algo similar a lo que nos enseñas tan claramente.
Tengo un pequeño problema, en los ejemplos de la página de Nivoslider, puedes capturar cualquiera de las imágenes con el ratón y arrastrarlas para copiarlas al escritorio. Sin embargo, tanto en tu ejemplo como en lo que he realizado yo ( http://www.stua.com/eng/coleccion/gas.html ) esto no se puede hacer. ¿Sabes porqué puede pasar esto?. Mi jefe quiere que cualquiera se puede copiar las imágenes… y yo estoy perdido.
Muchas gracias.
Hola Jose,
Es por la version, la version de Nivo de este tutorial es la 2.7 y la de la pagina de Nivo es 3.1, en esta utiliza otro tipo de mecanismo donde se te permite arrastrar las imagenes, intenta actualizar la version de Nivo a tu slider, mientras voy a actualizar el tutorial con la ultima version 😉
Muchisimas gracias por tu respuesta tan rápida. Me pongo con ello ahora y te respondo si lo consigo 😉
Fantástico. Simplemente he descargado la nueva versión, he sustituido el archivo jquery.nivo.slider.js y funciona.
Eso sí, he tenido que reajustar el default.css pues se habían movido los controles de navegación, pero nada realmente complicado.
Estoy muy contento… y mi jefe más 😉
Voy a abusar un poco de tu amabilidad, Josue. Siguiendo tus consejos conseguí activar la captura de imágenes, pero ahora me ha surgido un problema adicional. En Chrome, mi navegador habitual, no ocurre nada anómalo, pero al visualizar el slide en Firefox o Explorer he detectado algunas deficiencias que no consigo corregir:
– Mi slide es de navegación manual, no automático, pero hasta que no comienzo la navegación, la imagen de fondo se mantiene.
– En las transiciones, la imagen de fondo aparece fugazmente.
Esto sucede con la imagen de fondo estándar de «cargando»:
http://www.stua.com/eng/proyectos/calparsoro.html
Y también con una imagen de fondo personalizada:
http://www.stua.com/eng/proyectos/metropol.html
Antes no ocurría esto, ni tampoco ahora en Chrome, ni con la versión anterior de nivoslider.
Yo sigo haciendo pruebas, pero cualquier sugerencia será bienvenida. Muchisimas gracias.
Ya lo he solucionado yo solo. Era un tema de actualizar también los css del nivoslider.
gracias!!
Enhorabuena, pues es de los tutoriales mejor explicados y trabajados que he visto.
Hola! Cómo estás? Estoy rediseñando mi sitio web e inserte el nivo slider en lo que va a ser la página de inicio, el sitio lo estoy diseñando en PHP y MSQL, cree un apartado admin para poder actualizarlo desde afuera, pero no se como hacer para conectar el slider con MSQL y que cuando quiera actualizar las imagenes, estas vallan directamente al lugar de destino =/…. Apreciaria mucho si me pudieran responder…
Josue:
Muchas gracias por tu tutorial. Lo implementé y me funciona. Eso si, tengo un problema de visualización: en algunas versiones de navegadores (como por ejemplo Chrome 24.0.1.1312.52, o Explorer 8.0) me muestra el slider, pero corrido un 50% hacia la derecha, por lo que veo solo la mitad del slider y la otra mitad no se visualiza ya que sale del espacio del contenedor general. Qué podría hacer para solucionar este tema?, sabes alguna línea de código con la que pueda solucionar esto?. La dirección donde se encuentra alojado el sitio actualmente es la siguiente: http://almarzadiseno.cl/prueba2/index.html
Ojalá puedas ayudarme. Muchas gracias!
Sigo el tutorial paso a paso y cuando termino y quiero ver como funciona, en lugar de que me funcione el slider, me salen las 4 imágenes que éste contiene pero de la forma siguiente:
Imagen 1 Imagen 2
Imagen 3 Imagen 4
Alguien sabe de que se puede tratar?
Gracias de antemano
Que te sale en la consola?
Hola Josue muy bueno todo.
Tengo una pregunta … , Pude editar todo el slyder y funciona perfecto , pero nececesitaria achicar el margen o espacio que me queda entre las fotos y los bulets en el slyder, como hago eso ?? Gracias y felicitaciones
Hola, estuve horas para tratar de incorporar 2 nivo en una página y lo logré, excepto que el único problema que no pude resolver es que el posicionamiento de los controlNav (puntos para seleccionar imagen) se rige sólo por el CSS que se llame al último dentro del index (creé 2 para independizar los comandos).
alguna ayuda? me faltó sólo eso,,, pero así no me sirve.
gracias
Hola, estoy muy perdida, he seguido las indicaciones paso a paso y el resultado es que no aparece el nivo slider. Alguna sugerencia? mil gracias.
Mira la consola de Javascript, fijate si hay errores.
Hola Josue. Muy práctica tu explicación, he podido colocar correctamente el slider.
Lo que no tengo claro es al momento de optimizar las imágenes que le quiero colocar; tengo que ponerlas al tamaño del «wrapper», al mismo tamaño original de estas imagenes de muestra que vienen con el slider o con alguno de estos códigos css o java las imágenes automáticamente se ajustan al slider???
Te agradezco de antemano tu respuesta! Un saludo.
Puedes ajustarlos con CSS, aunque creo que el Nivo las ajusta sola, sin embargo lo mas recomendable es redimensionarlas previamente, irian del tamaño que quieres que sea tu slider.
Es que probado de poner una imagen y empuja hacia abajo modificando la altura del slider… y no logro entender el porque…
Hola, puse el slider en la página y queda muy bien pero he decidido que quiero ponerlo mediante iframe y ahora no consigo que me quede centrado dentro del marco…
Centralo con margin: 0 auto, para que funcione tienes que definirle un width al iframe.
margin 0 auto al slider y le quito la posicion absolute mejor? al iframe le tengo puesto el width y el height
Me referia margin: 0 auto al iframe para centrarlo, tienes problemas para centrar el iframe o el slider que esta dentro del iframe? pasame la URL donde lo tienes para checarlo.
Perdón que no vi la respuesta antes. http://cdc-i.es/dw/veronica/rollers/roller-puebla/index.html es el slider dentro del iframe, ahora solo se ve mal en IE8. Los IE viejos son mi cruz, por lo menos en IE10 se ve bien… Podrias hacer un tuto extenso sobre adaptar las webs a IE porque yo he intentado con el PIE y los ‘if’ para las CSS alternativas pero no me sale…Saludos y gracias
Estimados, no consigo centrar las imágenes que ocupan el 100% de la pantalla dentro del slider.. me podrian ayudar? Gracias!
Quieres un slider full-screen? hay algunos plugins especificos para eso.
@josueochoa:disqus esta galeria se pude usar sin terminos y condiciones de pago o como derechos de autor en cualquier pagina web sin problemas?
disculpe puedo poner dos slider nivo en m,i pagina index
Checa http://codepen.io/josueochoa/pen/dFzqu
hola, puse el slider y me aparece alineado a la izquierda, quisiera alinearlo a la derecha ayuda =)
float: right?
como puedo hacer para que el slide salga en todas las paginas y no solo en la de inicio, estoy usando joomla y solo me sale en la pagina de inicio. gracias
No uso ni se Joomla, lamento no poder ayudarte.
hola en primer lugar gracias por el tutuo, tengo un problema la imagen de WALL baja unos cunatos pixeles mas abajo que las demas como lo arreglo??
Hola Josue muy buenos tus tutos, me gustaria implementar este slider en un sitio web en que estoy trabajando mi pregunta es para colocar otras imagenes, sean mas pequeñas o mas grandes que las de la demo donde especifico el tamaño o que valor hay que agregar y en que archivo sea el css o el js? y es posible asignarles links a cada imagen?
Hola josue, el slider funciona perfectamente ya que la explicación está muy clara.
En
mi caso tengo una pequeña consulta que hacerte y es la siguiente: no me
gusta que aparezca la navegación con bullets, asi que he renombrado el
archivo bullets.jpg para que no aparezca, pero si que aparece un
sombreado de la anchura que ocuparía ese img y sus margenes.
He
quitado el margin en el default.css y el sombreado sigue ahí. También lo
he intentado desde el js. colocando controlNav: false, cosa que tampoco
ha funcionado. Sabrías decirme donde reside el problema?. Veo que en la
página oficial de nivo slider ese sombreado inferior no aparece y se
limita al borde de las fotos unicamente.
Saludos.
Muchisimas gracias por esta pequeña guia que has echo me ah servido de mucho ya que estava perdido con esto de los slideshows que encontraba por internet y supongo que es el mismo proceso de instalacion o parecido con otros sliders jeje gracias ahora podre aplicarlo en mi pagina web Saludos 😀
Hola, muchísimas gracias por el tutorial.
Tengo un problema con el slider aquí dejo el link de la página
http://www.amiz.edu.mx
al hacer pequeña la pantalla se me recorre hacia la derecha, dónde puedo corregir ese problema. Muchas Gracias!!
No veo que pase ese error.
que buen tutorial haces! lo he hecho paso a paso y me funciona perfecto, solo tengo un problema, al momento de subirlo al hosting sale totalmente desordenado, sin margenes ni nada, pero cuando le doy probar en mi servidor local desde el dreamweaver cs6 se ve perfecto, porq pasa eso??? me puedes ayudar por favor te lo agradeceria. mil y mil gracias de antemano.
Cual es la URL donde lo estas probando, nunca esperes ver una pagina igual como la ves en DW.
Hola Muchas gracias por el tiempo de brindarnos una explicación tan detallada, en el último paso, para ver las imágenes : bullets.png y arrows.png no me las muestra, lo único visible es el texto Prev y Next en el casi de arrows, y en bullets solo se muestran los números, ya cambie la ruta, que es muy parecida a la que tu tienes, con la diferencia que mi carpeta se llama img, al inspeccionar elemento si veo que las imágenes están en la ruta correcta, pero no logro verlas. No se si tengas idea que otra cosa tenga que modificar. Gracias
Revisa la ruta de las imagenes.
Muchas gracias por el pluging y por las explicaciones!! Pensaba que no
iba a ser capaz de hacerlo funcionar. Aunque no lo he conseguido del
todo. No se por qué la opción de que sólo aparezcan las flechas al poner
el cursor encima del slider no funciona (aparecen todo el tiempo). Y
entre la primera imagen y el resto el tipo de transición es distinto,
aunque yo juraría que he puesto todos iguales. Puedes echarme una mano
con ésto? te mando el codigo a partir del script. Gracias!!
$(window).load(function() {
$(‘#slider’).nivoSlider({
slices: 1, // Cantidad de cortes de dicho efecto
boxCols: 8,
boxRows: 4,
animSpeed: 3000, // Velocidad de la transición
pauseTime: 7000, // Tiempo de espera para mostrar otra transicion
startSlide: 0, // Orden de imagen a mostar cuando se carga el slider (0=index)
directionNav: true, // Permite true/false la navegación manual, usando los arrows
directionNavHide: true, // Muestra los arrows sólo cuando el cursor esté sobre el slider.
controlNav: true, // 1,2,3… Permite navegar usando los bullets de la parte inferior.
keyboardNav: false, // Usa las flechas izquierda y derecha del teclado
pauseOnHover: true, // Detener la transición cuando el cursor esté sobre el Slide
manualAdvance: false, // Forzar a que sea sólo manualmente la transición
captionOpacity: 0.8, // Opacidad del caption
prevText: ‘Prev’,
nextText: ‘Next’,
effect: ‘fade’,
randomStart: false, // Inicio de una transicion al azar
beforeChange: function(){}, // Se ejecuta o activa antes de una transición
afterChange: function(){}, // Se ejecuta o activa despues de una transición
slideshowEnd: function(){}, // Se ejecuta o activa despues de que todas las imagenes hallan sido mostradas
lastSlide: function(){}, // Se ejecuta o activa despues que la última imagen ha sido mostrada
afterLoad: function(){} // Se ejecuta o activa cuando el slider ha sido cargado
}); // Carga de NivoSlider
});
¡Muchas muchas Gracias! Gracias a gente como tu, nosotros los babys de la programación tenemos una posibilidad de hacer algo, me ha sido de gran utilidad, deverdad que gracias.
Muchas gracias por el pluging y por las explicaciones!! Pensaba que no
iba a ser capaz de hacerlo funcionar. Aunque no lo he conseguido del
todo. No se por qué la opción de que sólo aparezcan las flechas al poner
el cursor encima del slider no funciona (aparecen todo el tiempo). Y
entre la primera imagen y el resto el tipo de transición es distinto,
aunque yo juraría que he puesto todos iguales. Puedes echarme una mano
con ésto? te mando el codigo a partir del script. Gracias!!
$(window).load(function() {
$(‘#slider’).nivoSlider({
slices: 1, // Cantidad de cortes de dicho efecto
boxCols: 8,
boxRows: 4,
animSpeed: 3000, // Velocidad de la transición
pauseTime: 7000, // Tiempo de espera para mostrar otra transicion
startSlide: 0, // Orden de imagen a mostar cuando se carga el slider (0=index)
directionNav: true, // Permite true/false la navegación manual, usando los arrows
directionNavHide: true, // Muestra los arrows sólo cuando el cursor esté sobre el slider.
controlNav: true, // 1,2,3… Permite navegar usando los bullets de la parte inferior.
keyboardNav: false, // Usa las flechas izquierda y derecha del teclado
pauseOnHover: true, // Detener la transición cuando el cursor esté sobre el Slide
manualAdvance: false, // Forzar a que sea sólo manualmente la transición
captionOpacity: 0.8, // Opacidad del caption
prevText: ‘Prev’,
nextText: ‘Next’,
effect: ‘fade’,
randomStart: false, // Inicio de una transicion al azar
beforeChange: function(){}, // Se ejecuta o activa antes de una transición
afterChange: function(){}, // Se ejecuta o activa despues de una transición
slideshowEnd: function(){}, // Se ejecuta o activa despues de que todas las imagenes hallan sido mostradas
lastSlide: function(){}, // Se ejecuta o activa despues que la última imagen ha sido mostrada
afterLoad: function(){} // Se ejecuta o activa cuando el slider ha sido cargado
}); // Carga de NivoSlider
});
Muchas gracias por el pluging y las explicaciones! Pensaba que me iba a ser imposible hacer algo así pero al fin he podido. Sólo tengo dos problemas: no consigo que las flechas desaparezcan aún sin estar el cursor encima del slider y la primera imagen me hace un efecto distinto de transición al q tengo puesto y no se como cambiarlo! Te mando el codigo desdel el script. Muchas gracias!!!
$(window).load(function() {
$(‘#slider’).nivoSlider({
slices: 1, // Cantidad de cortes de dicho efecto
boxCols: 8,
boxRows: 4,
animSpeed: 3000, // Velocidad de la transición
pauseTime: 7000, // Tiempo de espera para mostrar otra transicion
startSlide: 0, // Orden de imagen a mostar cuando se carga el slider (0=index)
directionNav: true, // Permite true/false la navegación manual, usando los arrows
directionNavHide: true, // Muestra los arrows sólo cuando el cursor esté sobre el slider.
controlNav: true, // 1,2,3… Permite navegar usando los bullets de la parte inferior.
keyboardNav: false, // Usa las flechas izquierda y derecha del teclado
pauseOnHover: true, // Detener la transición cuando el cursor esté sobre el Slide
manualAdvance: false, // Forzar a que sea sólo manualmente la transición
captionOpacity: 0.8, // Opacidad del caption
prevText: ‘Prev’,
nextText: ‘Next’,
effect: ‘fade’,
randomStart: false, // Inicio de una transicion al azar
beforeChange: function(){}, // Se ejecuta o activa antes de una transición
afterChange: function(){}, // Se ejecuta o activa despues de una transición
slideshowEnd: function(){}, // Se ejecuta o activa despues de que todas las imagenes hallan sido mostradas
lastSlide: function(){}, // Se ejecuta o activa despues que la última imagen ha sido mostrada
afterLoad: function(){} // Se ejecuta o activa cuando el slider ha sido cargado
}); // Carga de NivoSlider
});
Hola Josue. Primero Muchas Gracias por el tutorial, me sirvió muchísimo.
Solo he tenido un problema en su instalación : cuando achico la pantalla, o la visualizo desde una tablet, el slider se desplaza hacia la derecha automaticamente. Sabes alguna solucion para este problema? te dejo el link de la pagina para que veas el error mas claramente ( http://www.wasabiproducciones.com.ar )
Muchas gracias espero tu respuesta
Es por unos media queries al final de tu default.css, actualizalo a la nueva version 1.3 (http://demo.dev7studios.com/nivo-slider/wp-content/plugins/nivo-slider/scripts/nivo-slider/themes/default/default.css).
Hola josue, he logrado solucionar mi problema anterior y me quedo realmente excelente el sitio. Pero ahora con otra web me ha surgido una nueva dificultad.
Resulta que he puesto un menu desplegable, justo por encima del slider y cuando me acerco al menu y este se despliega, lo hace por debajo del slide.
Sabes por que puede ocurrir esto?
Espero tu respuesta muchas gracias!
Es por el z-index, ambos elementos tienen position: absolute/relative, y por defecto el orden es de arriba hacia abajo, osea el slider va a estar encima del menu, lo que tienes que hacer es definirle al menu un z-index mayor, por ejemplo: z-index: 100.
Muchas gracias , me funciono ala perfeccion…
pero tengo una duda , quise puner un menu desplegable, pero ala hora de mostrarme las columnas el slider show me los tapa, como ago para enviarlo al fondo?
Como ambos elementos están con position relative o absolute, por defecto el objeto que se pone adelante es el ultimo, en este caso el slider, pero puedes arreglar esto forzando al menu a que este primero poniendole un z-index superior al del slider (por ej: z-index: 10000).
Hola queria consultarte ya que soy muuuuy inexperta en esto. Si quiero que en la galeria se vean mas de 4 imagenes como hago? que parte del codigo debo editar?
Si puedes responderme desde ya muchas gracias
Solo duplica los elementos img a la cantidad que desees, no te olvides de cambiar el atributo ‘src’ a la ruta de la imagen.
Hola, sabes si se puede poner mas de un slider en la misma pagina?
eu queria complementar a pergunta acima: tem como colocar 2 slides na mesma página com configurações diferentes em cada um? (transições diferentes e tamanho de slides diferente)?
Se for possível, você tem que duplicar o slider na HTML e JS, mais eles tem que ter diferentes IDs, você pode vê-lo trabalhando aqui http://codepen.io/josueochoa/pen/dFzqu
Si, es posible, tienes que duplicar el slider en el HTML y en el JS, ademas tienen que tener IDs distintos, aqui puedes verlo funcionando: http://codepen.io/josueochoa/pen/dFzqu
Buenos días, requiero su ayuda. Estoy realizando un sitio web donde debo usar 2 carruseles. El primero que implemente es DualSlider, ya que debo tener imagen y textos dentro del mismo DIV. El otro es FlexiSlider (basic carousel). Al llamar las librerias de Jquery se presenta un problema que consiste en que los 2 carruseles generan automáticamente un menú inferior. Este menú son unos números que indican la cantidad de slides que hacen parte del carrusel y al hacer clic en ellos hace que se visualice el respectivo DIV. Pero parece que las librerias no son compatibles y el menú de uno de los 2 carruseles deja de funcionar. ¿Cómo puedo solucionar esto? Gracias de antemano.
Mmm, no te logro entender, pero te puedo recomendar este plugin de carousel, que hasta ahora no me ha dado problemas: http://www.gmarwaha.com/jquery/jcarousellite/
Lo he usado en conjunto con Nivo y otros plugins.
No se si han contestado a esta pregunta, como se activan lasteclas de derechs e izquierda en el teclado del pc
Me parece que quitaron esa funcionalidad a partir de la version 3.xx, si la necesitas puedes probar utilizar una version anterior https://gist.github.com/josueochoa/6073409
Que tal Josue, Una vez más tienes justo lo que andaba buscando. Me ha servido enormemente ponerle comentarios a la imagen mediante el #caption. Me encantaría poner arriba en la imagen un título y abajo el comentario tal como lo expusiste. Hay algun método para lograr esto. Además como puede aclararse el fondo para los comentarios?
Muchísimas gracias de antemano y que Dios te siga bendiciendo con ese don de ayuda los que no sabemos.
🙁
Quieres poner dos captions? podrías pasar un solo caption HTML y dentro de este dos div, uno lo subes y el otro lo bajas (con CSS), sobre cambiar la opacidad de los captions, eso lo modificas en el CSS (nivo-slider.css, linea 62, la propiedad ‘opacity’).
Esta explicación está perfecta!! muchisimas gracias por poner tanta dedicación a este aporte. Yo soy super nueva en esto, y ando media perdida con el tema de los archivos, en especial con los HTML, que no los encuentro, usted podria decirme en que archivo deberia colocar las líneas de codigo?? es un poco tonta mi pregunta pero estoy muy perdida, yo siempe edito los php y el css, pero no he encontrado el html.
gracias!!
a ver es lo mismo el index.html que el index.php?? porque solo encentro el .php
Si, si esta .php es lo mismo.
Hola Laura, supongo que tu pagina tiene un archivo que se llama index.html, ese es el que tienes que editar, si no existe, crealo.
Hola Josue, grandísimo trabajo!!!
Tengo una duda que no sé como solucionar me he bajado de aquí http://www.egrappler.com/free-html5-portfolio-business-template/html/index.html esta plantilla html5 para hacer una pequeña y sencilla web y es perfecta para lo que quiero salvo por una cosa:
así es cómo se ve la web al entrar: http://img801.imageshack.us/img801/9643/5t61.jpg
así es como quiero que se vea. es decir, con la sección «main» ya abierta, me parece que queda más bonita: http://img4.imageshack.us/img4/7286/z9co.jpg
no tengo conocimientos de programación, más que algunos muy básico en plan html antiguo y estoy ya toda desesperada probando aquí y allí sin saber.
gracias por la ayuda!!!
Hola buenas tardes, en verdad para ser inexperta en esto me salio chevere,muy buena tu explicación, pero no me esta agarrando los themes puedo tener algo malo, en el explorador de chrome no me salen los bullets sino numeros en la parte inferior pero en firefox si, tampoco me salen las flechas de izquierda y derecha solo con palabras (Prev, Next), también no me aparece centrado en la porque sino mas a la derecha!. Podrás ayudarme? te anexo como se ve la galería para que tengas idea de como me sale en chrome.
Muchas Gracias
Pasame el link donde lo estas probando.
hola josue, excelente el programa estoy colocando los archivos de nivoslider en mi pagina web o que estoy disenando y no me funciona, estoy utilizando wampserver cree una carpeta en www con el nombre d la pagina que estoy disenando y guarde los archivos nivo slider alli pero cuando ingreso por localhost no abre la pagina index de nivo bueno si abre pero no muestra nada sin embargo, cuando la abro fuera de localhost si funciona, me podrias indicar cual pudiera ser el error? gracias de antemano. Disculpa soy nuevo programando por lo que te pregunto, debo tener instalado jquery para q esto funcione? te pregunto porque solo tengo wampserver y estoy utilizando el editor dreamweaver.
Hola Josue!
Muy buen tutorial!!
Quiero reemplazar una animación en flash por el nivo slider. Todo funciona bien, salvo que me tapa el dropdown del menu de navegación. http://www.dorwil.com.ar
He estado viendo lo del z index en el css del menu jqueryslidemenu pero no resulta.
Como puedo solucionar esto? Desde ya muchas gracias por tu ayuda.
Solucionado!!
Solo era tema de saber donde incluir el z Index:
Con esto funciona lo más bien
/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
z-index:200;
}
Muchas gracias Josué
Hola Josue! Muy buen tutorial, muchas gracias y felicitaciones!
Tengo un par de problemas, el primero es que las imagenes en la transicion no se cargan en el mismo lugar y el segundo es que no me aparcecen las flechas al estar sobre el slider. Te dejo el link para que lo puedas ver.
http://www.dvrsistemas.com.ar/proyectos/nivoslider/slider/slider2.html
Espero tu respuesta. Muchas gracias!
Estimado, he desarrollado una web con el dominio http://www.mamushkacine.com.ar utilizando nivo-slider y tengo un problema que no puedo resover. Cáda área de la web tiene sus propias fotos y cuando se cambia de área en vez de traer la primera fotos de ese área, trae la última y luego hace un salto a la primera. Realmente no entiendo que estaré haciendo mal.
Me podrás ayudar.
Gracias
Hola Josue, gracias por el tutorial, ya lo estoy implementando!!! Me podrías recomendar un plugin(gratuito) para hacer un slider de noticias?. Lo que quiero es que a la imagen se le agregue un texto más abajo, pero que no sea parte de la imagen, o sea un texto aparte, algo así como un párrafo. No se si el Nivo me sirva para eso, pero la verdad no sé como hacerlo. ¿Me podrías ayudar? Te lo agradecería un monton. Todos los plugin que he visto, son solo de imágenes, pero que incluyan texto abajo, solo hay de pago.
Estimado, en una pagina hecha primero en photoshop, luego guardada en HTML y modificada en cualquier editor de HTML como hago para incrustar nivo? tendría que dejar el lugar exacto en cuanto a ancho y largo y luego copiar el código en ese sector? porque hago eso pero me desacomoda todo el diseño, hay alguna forma de poder incrustarlo y quede centrado y sin romper el diseño? saludos cordiales
Hola Josue.
Gracias por este magnífico tutorial.
¿Existe alguna forma de lograr que la primera imagen sea siempre la misma y el resto se muestren aleatoriamente?
una pregunta este plugin solo funciona con imagenes o tambien con div´s que tengan un fondo?
Hola! por lo que vi nadie pregunto esto; como hago para poner los bullet por encima del slider o mejor dicho de las imagenes.. ejemplo estan las imagenes y al costado sobre ellas los bullet ( circulos que indican por que foto va) muchas gracias!! muy buen post!!
As a true novice I deleted an image from the gallery folder and now I’m unable to display the gallery. It loops forever and will not loop.
Of course I’m missing something but I’m sure an experienced coder will have my answer.
Thanks in advance.
As a complete novice I deleted one image from a functional webpage and now the gallery does not load. It spins forever.
Of course I’m missing something but it’s beyond me. I’m sure an experienced coder can quickly tell me what I’m missing.
Thanks in advance.