<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>

<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>

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

Comentarios desde Facebook

22 comentarios

1. prywatne po¿yczki pod zastaw dice:

   4 noviembre 2012 a las 11:03

   This site was… how do I say it? Relevant!! Finally I
   have found something which helped me. Appreciate it!

   Responder
2. eloise dice:

   26 julio 2011 a las 3:54

   I am trying to look for a way to stop the banner to be rotated when the mouse pointing to the banner?

   is anyone know how to change the js?

   Thanks.

   Responder
3. Kevin dice:

   13 julio 2011 a las 17:20

   Buenisimo! muchas gracias!

   Responder
4. Diego dice:

   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

   Responder
5. Oso21 dice:

   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?

   Responder
6. laboralis dice:

   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!

   Responder
   • miguelortega dice:

     17 septiembre 2010 a las 14:55

     con un random en php lo podrias hacer.
7. adrian dice:

   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”!!

   Responder
   • miguelortega dice:

     17 agosto 2010 a las 18:52

     si lo puedes bajar, solo tienes que modificar el css, saludos
8. Liz Palacios dice:

   22 septiembre 2009 a las 10:22

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

   Responder
9. Jorge dice:

   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

   Responder
10. jose dice:

    8 septiembre 2009 a las 21:14

    Ok gracias

    Responder
11. lalo2302 dice:

    8 septiembre 2009 a las 21:04

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

    Thank you, Gracias

    Responder
12. Alex Aguiar dice:

    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/

    Responder
13. jose dice:

    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"}];

    Responder
14. Alex Aguiar dice:

    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)

    Responder
15. jose dice:

    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

    Responder
16. jose dice:

    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

    Responder
17. jose dice:

    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

    Responder
18. Alex Aguiar dice:

    7 septiembre 2009 a las 20:42

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

    Responder
19. jose dice:

    7 septiembre 2009 a las 20:35

    Please IE6.0 Buttons Problem.. PLEASE

    Responder

Trackbacks for this post

1. Slide con Jquery no puedo hacer funcionar - Descargas Directas | DowntWarez.Com dice:

   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 [...]