Otro Slider de jQuery

Cuando accedemos a una página lo que más llama la atención son los sliders o presentación de imágenes, cuando las transiciones son automáticas pueden llegar a cansar e incluso restar atención al contenido que en realidad es lo importante.

El que veremos hoy es a petición de EcuaLink se trata de un slider que contiene la plantilla Elios adaptada por Web2Feel y que podemos descargar en BTemplates

Para añadir el slider nos situamos justo antes de </head> y pegamos el contenido de este archivo Si ya estamos usando jQuery eliminamos la siguiente línea de lo que añadimos anteriormente.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>

Guardamos los cambios y en plantilla de diseño editamos un gadget de HTML justo después de la cabecera. En su interior añadimos lo siguiente:

<div id='slidearea'>
<ul class='kwicks'>
<li class='kwik'>

<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>
</ul>

<div class='clear'/>
</div></div>

En Url-imagen añadimos la url de nuestra imagen de 750 x 256

En Texto-contenido es el espacio para incluir el texto que se muestra con fondo transparente. Igualmente haremos con Título- contenido.

Si deseamos suprimir la sombra del borde nos ubicamos en los estilos "slidearea" y eliminamos lo marcado en negrita, también podemos añadir otros tipos de borde.

#slidearea{
height: 250px;
overflow: hidden;
position: relative;
width:980px;
background:#fff;
border:5px solid #fff;
margin:20px 0px 20px 0px;
box-shadow: 0 0 10px #aaa;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
}