Un
slider tipo carrusel con imágenes y botones de ir adelante y hacía atrás, fácil de implementar funciona con
JQuery y es totalmente personalizable tanto en tamaño como ajustes básicos como colores de fondo y tiempo de transición, se puede establecer cualquier cantidad de imágenes posibles.
La ubicación ideal sería arriba de las entradas, si lo desean solo en la portada solo tendrían que condicionarlo, y el resultado se vería de esta manera:
Lo que haremos es ir a diseño y agregar un HTML-JavaScript justo arriba de las entradas pero si gustan lo pueden ubicar donde quieran ya que es totalmente ajustable.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var speed = 5000;
var run = setInterval('rotate()', speed);
var item_width = $('#slides li').outerWidth();
var left_value = item_width * (-1);
$('#slides li:first').before($('#slides li:last'));
$('#slides ul').css({'left' : left_value});
$('#prev').click(function() {
var left_indent = parseInt($('#slides ul').css('left')) + item_width;
$('#slides ul').animate({'left' : left_indent}, 100,function(){
$('#slides li:first').before($('#slides li:last'));
$('#slides ul').css({'left' : left_value});
});
return false;
});
$('#next').click(function() {
var left_indent = parseInt($('#slides ul').css('left')) - item_width;
$('#slides ul').animate({'left' : left_indent}, 100, function () {
$('#slides li:last').after($('#slides li:first'));
$('#slides ul').css({'left' : left_value});
});
return false;
});
$('#slides').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('rotate()', speed);
}
);
});
function rotate() {
$('#next').click();
}
//]]>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<div id="contenedor">
<div id="carousel">
<div class="clear"></div>
<div id="slides">
<ul>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKbPoGE0-wJs72dvOFUmj9gq8gButPp_tsClP7sTvTPM4dP_P1RXqh5xLrz4LsxyBDAX0OK0QKZDUtlfT4laWDESgwhJBmXHGkDEyWuOiWQtSRtiRZxktZ0q-JaI5ZTeVsPaz_0atfnMFZ/s1600/concerse3.jpg" width="580" height="300" alt="Slide 1"/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL89DTxvsUIOZv8jujg0XLV-rtOQlAEMTWkMle3q2J-KMwmXzO2Xa_0-c9it0oGO_tCufWIv-buJFD1uhZ2fNzPlWw50Bqb-sgqID563Ko8KPSggr4DCCu_X9FyqsCeuccHAc5dvJC0bSw/s1600/converse2.jpg" width="580" height="300" alt="Slide 2"/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL824zvvVpTrr6TlhYFA6XokSrAxfi-ZApv64ShnjJzTS-5nPrV4Rx2ra3FA2Qa2dgmP8cRvTbaMzI_ZC2w7CCLITjKedo-ULTSB6OoU5J7aMKZDQoSc-0XvKYnbtsDWfFZd3PszqDAG7o/s1600/cinverse1.jpg" width="580" height="300" alt="Slide 3"/></li>
</ul>
<div class="clear"></div>
</div>
<div id="buttons">
<a href="#" id="prev">prev</a>
<a href="#" id="next">next</a>
</div>
</div>
</div>
<style type="text/css">
#contenedor {
padding: 5px;
width: 593px;
height: 340px;
background: #fff;
border-radius: 10px;
border:2px solid #ccc;
}
#carousel {
height:340px;
margin:0 auto;
}
#slides {
overflow:hidden;
position:relative;
width:590px;
height:310px;
border:1px solid #ccc;
}
#slides ul {
position:relative;
left:0;
top:0;
list-style:none;
margin:0;
padding:0;
width:1740px;
}
#slides li {
width:590px;
height:310px;
float:left;
}
#slides li img {
padding:5px;
}
#buttons {
padding:0 0 5px 0;
margin-left: 265px;
float:left;
}
#buttons a {
display:block;
width:31px;
height:32px;
text-indent:-999em;
float:left;
outline:0;
}
a#prev {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifte90qgLA1EJNil3VrVGC1dLp4kwjUv8XPiopTLrrZLDYb-HUfjToUwMD0DZGReBezlFtfDUJOvPnhL6CkJTvc1OXOZ87HHYEGlkTOF_NAFl3fxPPxMbnxrAxHYK8nJi8GCEojVF6Xo-P/s1600/ADS.gif) 0 -31px no-repeat;
}
a#prev:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifte90qgLA1EJNil3VrVGC1dLp4kwjUv8XPiopTLrrZLDYb-HUfjToUwMD0DZGReBezlFtfDUJOvPnhL6CkJTvc1OXOZ87HHYEGlkTOF_NAFl3fxPPxMbnxrAxHYK8nJi8GCEojVF6Xo-P/s1600/ADS.gif) 0 0 no-repeat;
}
a#next {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifte90qgLA1EJNil3VrVGC1dLp4kwjUv8XPiopTLrrZLDYb-HUfjToUwMD0DZGReBezlFtfDUJOvPnhL6CkJTvc1OXOZ87HHYEGlkTOF_NAFl3fxPPxMbnxrAxHYK8nJi8GCEojVF6Xo-P/s1600/ADS.gif) -32px -31px no-repeat;
}
a#next:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifte90qgLA1EJNil3VrVGC1dLp4kwjUv8XPiopTLrrZLDYb-HUfjToUwMD0DZGReBezlFtfDUJOvPnhL6CkJTvc1OXOZ87HHYEGlkTOF_NAFl3fxPPxMbnxrAxHYK8nJi8GCEojVF6Xo-P/s1600/ADS.gif) -32px 0 no-repeat;
}
.clear {clear:both}
</style>
var speed =
5000;
es el tiempo de transición entre imagen e imagen.
animate({'left' : left_indent},
100,function()
es la velocidad de traslado de las imagenes
<li><img src="URL de su imagen" width="
580" height="
300" alt="Descripción de la imagen"/></li>
Width y
height son el ancho y alto de las mismas.
Para establecer enlaces para las imágenes la estructura sería de esta forma:
<li><a href="URL del enlace"><img alt=" Descripción de la imagen
" src="URL de la imagen" height="alto de la imagen" title="Titulo de la imagen" width="ancho de la imagen" /></a></li>
El resto de los valores como colores de fondo, bordes tamaños son personalizables.
Como se ve es muy sencillo y le da un toque diferente al sitio.
