Un gran Slider de imágenes en Jquery

Estos días estoy poniendo a punto la página web de oferta de Tiendas Virtuales de la empresa en la que trabajo ( Camaltec Ibérica ) y me encontré en la situación de hacer una muestra de las últimas tiendas virtuales que hemos montado en las últimas semanas. Durante un momento pensé en hacer el clásico imagen-enlace, pero pensé que una buena búsqueda de slider podría dar una de esas situaciones de "el tiempo usado para la búsqueda merecerá la pena". Y tuve la fortuna de encontrar la web de Dream CSS . La web está montada por Ravindra Misal que la mantiene como una página especializada en tutoriales y aplicaciones para bloggers y diseñadores desde 2.008 .

El Slider es de MUY FÁCIL aplicación, y la visualización es tan visual como esta :


Os voy a poner paso a paso cómo aplicarlo, dónde y (si atino) los archivos que ellos mismos ofrecen.

PASO 1

Lo primero es crear un nuevo archivo de HTML.

Una vez creado, hay que aplicar entre las etiquetas y esta organización de capas :

________________________________________________________________

________________________________________________________________

Está en JPG (problemas de creación de entradas, mi disculpa por delante), para poder verlo y 'copy/paste' lo tenéis en este enlace.

PASO 2

Una vez creado el archivo en HTML hay que aplicarle a las capas los estilos en CSS para darle el efecto visual buscado. Para ello se crea un archivo nuevo de .CSS y en él se aplica en css siguiente:

________________________________________________________________

*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
color:#a4a4a4;
cursor:default;
font-size:11px;
line-height:16px;
text-align:center;
background-color:#000;background-position:50% 0;
background-repeat:no-repeat;
font-family:Tahoma,sans-serif;
}
a:link,a:visited{
color:#fff;
text-decoration:none;
}
a img{
border:0;}
div.wrap{
width:993px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:993px;
height:52px;
margin:22px 0 0;
background:url url(images/nav-bg.png) 0 0 no-repeat;}
div#top div#nav ul{
float:left;
width:700px;
height:52px;
list-style-type:none;
}
div#nav ul li{float:left;
height:52px;
}
div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
div#header{
margin:-1px 0 0;
}div#video-header{
height:683px;
margin:-1px 0 0;
}
div#header div.wrap{height:299px;
background:url(images/header-bg.png) 50% 0 no-repeat;
}
div#header div#slide-holder{
z-index:40;
width:993px;
height:299px;
position:absolute;
}
div#header div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:973px;height:278px;
overflow:hidden;
position:absolute;
}
div#header div#slide-holder img{
margin:0;
display:none;
position:absolute;}
div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:973px;
height:46px;
display:none;
position:absolute;
background:url(images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text{float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;margin:11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(images/silde-nav.png);}
div#nav ul li a{background:url(images/nav.png) no-repeat;}

________________________________________________________________

En este punto, especialmente si en la web en la que queráis aplicar el slider tenéis, como suele ser habitual, otro archivo de 'estilo.css', debéis revisar bien el .css nuevo ya que incorpora nuevas etiquetas #body y eso (dependiendo de su aplicación en la cabecera) podrá variar los estilos previamente aplicados. Igualmente, como suele ser habitual, la posibilidad de la aplicación en CSS de los estilos te permite variar completamente las formas, colores, el tamaño de las imágenes, etc.

PASO 3
Una vez aplicado el .css se debe copiar y pegar el siguiente código para jQuery después de su código HTML en la sección BODY.



Como antes, este es el enlace donde poder hacer bien el c/p.

Dentro del SCRIPT está la incorporación de 'Título' y 'Descripción' de cada imagen que aparece en la banda superior de slider. Para variar las mismas basta con cambiar lo puesto en client en cuanto a 'Titulo' y a desc en cuanto a 'Descripción' de la imagen. Por ejemplo =>

{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"} => {"id":"slide-img-2","client":"el titulo que se desee","desc":"y la descripcion que se quiera"}

PASO 4

Y ya hecho esto básicamente falta simplemente que se carguen los archivos .JS necesarios. En este caso jquery.js y scripts.js que se deben enlazar entre las etiquetas y


Bien aplicado, puede quedar un slider muy visual y sencillo de aplicación. Os dejo el ejemplo de cómo me ha quedado a mí: Tienda Virtual Profesional

Éste es el enlace para la descarga de los archivos

Y éste es el Árticulo Original