En
Sohtanaka he visto un slider que me ha gustado, se trata de Automatic Image Slider jQuery y como bien puede apreciarse está creado con jQuery.
La aplicación consiste en utilizar HTML /CSS /Javascript el efecto sería el
siguiente No es complicado, sólo requiere dedicarle un mínimo de tiempo y atención, nos situamos justo antes de </head> y añadimos:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
Justo después añadimos también el contenido de este
archivo.
Los estilos del slider los añadimos justo antes de
]]></b:skin>
/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:286px; width: 790px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(url-imagen) no-repeat; /*--aquí va la imagen de la paginación--*/
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {
font-weight: bold;
}
Por último en un gadget de
HTML incluimos el código que contiene las imágenes.
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="
url-enlace-1"><img src="
url-imagen-1" alt="" /></a>
<a href="
url-enlace-2"><img src="
url-imagen-2" alt="" /></a>
<a href="
url-enlace-3"><img src="
url-imagen-3" alt="" /></a>
<a href="
url-enlace-4"><img src="
url-imagen-4" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
- En la parte superior donde dice url-enlace-1- 2- 3- 4 es el espacio donde podemos añadir la url si deseamos que al pulsar sobre la imagen nos dirija a otro sitio.
- De no desear un enlace dejamos sólo el código para imagen es decir, en lugar de:
<a href="
url-enlace-1"><img src="
url-imagen-1" alt="" /></a>
bastaría con
<img src="url-imagen-1" alt="" />- Donde dice url-imagen-1- 2- 3- 4 lo sustituimos por la url de cada imagen.
- Para añadir el slider sin necesidad de modificar las medidas lo ideal son imágenes de 790 X 296.-
- En los estilos donde dice: background: url(url-imagen-) no-repeat; /*--aquí va la imagen de la paginación--*/ es el lugar destinado para añadir una imagen de fondo en la paginación.
- Si no deseamos una imagen podemos sustituirla por color background-color:#000; o añadirle esquinas redondeadas como hicimos en otras ocasiones con
border-radiusVer ejemplo:
