jul
2
2009
Programación con Style

Beautiful Slide con jQuery

Author An article by Liz Palacios    Comments 21 Comments

jQuerysliders_thumb8

Hola!!!

Este tutorial explica cómo crear Hermoso Slide con jQuery,

Paso 1: página HTML:
Descargar los archivos jquery.js, scripts.js,y llamarlos en el HTML dentro de la etiqueta <head>

<script type="text / javascript">
var _siteRoot='index.html',_root='index.html'; //index.html archivo donde incluiremos nuestro slide
</script>
<script src="js/jquery.js" type="'text/javascript'"></script>
<script src="js/scripts.js" type="'text/javascript'"></script>

Paso 2: página HTML:

<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href=""><img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="images/nature-photo1.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="images/nature-photo2.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4" src="images/nature-photo3.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-5" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
</div>
</div>

Paso 3: codigo CSS:

*{
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;}

Por ultimo, guarden y prueben!!!!!!

Les paso el link de los archivos.

Link al DEMO

Etiquetas: , , , , , , , ,

Related Posts

About the Author: Liz Palacios

21 Comments + Add Comment

  • Kevin 13 julio 2011 a las 17:20

    Buenisimo! muchas gracias!

  • Slide con Jquery no puedo hacer funcionar - Descargas Directas | DowntWarez.Com 7 mayo 2011 a las 15:10

    [...] Buenas…. Quiero pedir ayuda con respecto a un tema que me vuelve loco hace tiempo!… Esto: Beautiful Slide con jQuery | ZoneArtCSS | Tu lugar: Del Arte CSS [ZACSS] Create Beautiful jQuery slider tutorial No puedo hacer funcionar en vbulletin 3.8.x… Necesito [...]

  • Diego 13 octubre 2010 a las 14:09

    Hola amigos, he implementado la galeria en una web que ando desarrollando, y estoy teniendo problemas para visualizarla en IE.

    He leido en otros post de esta galeria que he encontrado en internet y veo q hay personas que han tenido problema con lo mismo, pero no le han dado solución. Tendran uds algun comentario para este problema?

    pueden visualizar la galeria aqui: http://www.academiacup.com/2010/index2.php

  • Oso21 3 octubre 2010 a las 4:01

    Hola. Quiero poner esto en mi vBulletin forum pero no me funciona, sera que habra alguna modificacino diferente?

  • miguelortega 17 septiembre 2010 a las 14:55

    con un random en php lo podrias hacer.

  • laboralis 16 septiembre 2010 a las 20:44

    ¡Excelente! Realmente un slider muy elegante y fino. Sube mucho la calidad del sitio.

    Solo tengo una pequeña consulta: ¿cómo puedo hacer para que el orden de los sildes sean aleatorios? Es decir, que del 1, no necesariamente pase al 2 sino que sea más bien random.

    ¡Muchas gracias!

  • miguelortega 17 agosto 2010 a las 18:52

    si lo puedes bajar, solo tienes que modificar el css, saludos

  • adrian 17 agosto 2010 a las 15:36

    hola, desde ya muchas gracias. funciona perfecto. queria saber si era posible bajar la barra transparente (donde esta el “POST: nature beauty add your description here”) hasta abajo de todo, al bottom.

    gracias y suerte”!!

  • Liz Palacios 22 septiembre 2009 a las 10:22

    Hola la vdd no lo he probado, en cuanto busque la manera lo pongo!!!
    Saludos!!

  • Jorge 21 septiembre 2009 a las 19:37

    Hola, he seguido el tutorial, funciona estupendamente, pero que tengo que hacer si en vez de poner imagenes quiero poner texto, no se como hacerlo¡¡¡, espero tu respuesta y gracias de antemano

  • jose 8 septiembre 2009 a las 21:14

    Ok gracias

  • lalo2302 8 septiembre 2009 a las 21:04

    Please all the dudes to the forum
    por favor todas las dudas al foro

    Thank you, Gracias

  • Alex Aguiar 8 septiembre 2009 a las 19:39

    WTF???????….
    your problem is with images, ok?… Not, with the “Beautiful Slide”, well, ask in this link
    http://www.zoneartcss.com/foro/

  • jose 8 septiembre 2009 a las 19:28

    Please continue problema IE6.0







    post:

    if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];

  • Alex Aguiar 7 septiembre 2009 a las 22:18

    this is a IE’s problem, with transparences, look this post to arrange this mistake
    http://www.zoneartcss.com/general/ie-png-fix-solucion-a-png-s-con-transparencia-en-ie6/

    and here for download
    http://code.google.com/p/pnghack/

    good bye and good luck
    ———————————–
    download this
    http://code.google.com/p/pnghack/

    and use in to 

    1
2
3

    <script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/pngHack.js" type="text/javascript"></script>
<script src="javascripts/functions.js" type="text/javascript"></script>

    and then in you “functions.js” add this

    1

    $$('a#slide-link-0','etc','etc');

    a#slide-link-0
    a#slide-link-1
    a#slide-link-2
    a#slide-link-3……..etc Your buttons ok?…

    add all ID’s for fixed (transparency)… and its all sorry for my bad english…
    but if you have not understand, (let me know)

  • jose 7 septiembre 2009 a las 21:29

    Problema es abrir con IE 6.0 Las imagenes de los botones de PNG transparencia no muestra correctamente

  • jose 7 septiembre 2009 a las 21:27

    Problem with IE 6.0 is open Images of the buttons does not display PNG transparency correctly

    “div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(images/silde-nav.png);}”

    Please check demo IE6.0

  • jose 7 septiembre 2009 a las 21:25

    Problem with IE 6.0 is open Images of the buttons in PNG does not display well

    “div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(images/silde-nav.png);}”

    check demo Please en IE6.0

  • Alex Aguiar 7 septiembre 2009 a las 20:42

    Hi Jos Whats is your problem? Tell us more to help you
    BYE

  • jose 7 septiembre 2009 a las 20:35

    Please IE6.0 Buttons Problem.. PLEASE

Leave a comment

Patrocinador

Siguenos

Suscribete

Escribe tu correo:

Recibirás un correo con todos los articulos escritos en ZoneArtCss durante el día.

Correo @zoneartcss.com

Obtén una cuenta de @zoneartcss.com gratuita

Enlaces

Comentarios