Nivo Slider es un plugin de JQuery que nos permite mostrar una galería de imágenes con diferentes efectos de transición entre ellas.




Para implementarlo nos bajamos de su página el archivo, subimos el plugin a nuestra web de alojamiento y editamos nuestra plantilla.

CSS

.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}

.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8;
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}

.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}

.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
#slider {
position:relative;
}
#slider img {
position:absolute;
top:0px;
left:0px;
}


Script

Antes de </body> insertamos

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='URL ALOJAMIENTO/jquery.nivo.slider.js' type='text/javascript'></script>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:3000,
directionNav:true,
directionNavHide:true,
controlNav:true,
beforeChange: function(){},
afterChange: function(){}
});
});
</script>

Se pueden ajustar las distintas opciones del slide, las arriba indicadas son las que muestra por defecto.


HTML

Añadimos un elemento HTML a nuestra plantilla y pegamos

<div id="slider">
<img src="URL ALOJAMIENTO IMAGEN 1" alt="" />
<img src="URL ALOJAMIENTO IMAGEN 2" alt="" />
<img src="URL ALOJAMIENTO IMAGEN 3" alt="" title="ESTO SE MOSTRARIA COMO CAPTION" />
<img src="URL ALOJAMIENTO IMAGEN 4" alt="" />
</div>

Podemos insertar el numero de imágenes que queramos y si añadimos texto en title, este aparecerá como caption en el slide.
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también