.png)
.png)
El slider que te presentamos en este post, es el que utilizamos en este blog DeveloperJI. En seguida te explicamos un poco la configuración.
Primero tienes que incluir las hojas de estilo dentro del head de tu página como se muestra a continuación.
<head>
<title>Nivo Slider Demo</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="nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
Enseguida creas el "div" que sera el contenedor principal, las imagenes que se presentaran en el slider y el caption la información que aparecera al pie de la imagen. Las imágenes se ligan con el caption con title="#htmlcaption" que es el ID de div que contiene la descripción.
<div id="wrapper" style="margin-top:180px;">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" title="#htmlcaption"/>
<img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="#htmlcaption2"/>
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" title="#htmlcaption3"/>
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" title="#htmlcaption4"/>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<div class="slaidCat">
Como crear tu blog
</div>
<div class="slaidDate">
23 Mayo 2013
</div>
<div class="slideDescipcion">
<a href="http://www.DeveloperJI.com"><strong>This</strong> is an example of a <em>HTML</em> caption with a link</a>. </div>
</div>
<div id="htmlcaption2" class="nivo-html-caption">
<div class="slaidCat">
ASP.NET
</div>
<div class="slaidDate">
23 Mayo 2013
</div>
<div class="slideDescipcion">
<a href="http://www.DeveloperJI.com"><strong>This</strong> is an example of a <em>HTML</em> caption with a link</a>. </div>
</div>
<div id="htmlcaption3" class="nivo-html-caption">
<div class="slaidCat">
Developer
</div>
<div class="slaidDate">
23 Mayo 2013
</div>
<div class="slideDescipcion">
<a href="http://www.DeveloperJI.com"><strong>This</strong> is an example of a <em>HTML</em> caption with a link</a>. </div>
</div>
<div id="htmlcaption4" class="nivo-html-caption">
<div class="slaidCat">
Jquery
</div>
<div class="slaidDate">
23 Mayo 2013
</div>
<div class="slideDescipcion">
<a href="http://www.DeveloperJI.com"><strong>This</strong> is an example of a <em>HTML</em> caption with a link</a>. </div>
</div>
</div>
</div>
El slide te permite poner diferentes efectos a las imágenes, esto lo puedes configurara con la propiedad data-transition de las imagenes, las opciones que tienes son:
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- random
- slideInRight
- slideInLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
Por ultimo solo tienes que agregar el Javascript que crea el slider y los include.
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Para descardar el ejemplo da click aquí.
Si tienes algun problema al implementar este Javascript o quieres agradecernos puedes ecribirme a info@developerji.com o por las redes sociales.
