Beautiful Slide con jQuery

23 16

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

Processing your request, Please wait....

Similar articles

23 Comments

  1. hack facebook with email 24 abril 2014 at 1:02

    It’s in reality a nice and useful piece of information.
    I’m satisfied that you shared this helpful information with us.
    Please keep us up to date like this. Thank you for sharing.

  2. prywatne po¿yczki pod zastaw 4 noviembre 2012 at 11:03

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

  3. eloise 26 julio 2011 at 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.

  4. Kevin 13 julio 2011 at 17:20

    Buenisimo! muchas gracias!

  5. Diego 13 octubre 2010 at 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

  6. Oso21 3 octubre 2010 at 4:01

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

  7. miguelortega 17 septiembre 2010 at 14:55

    con un random en php lo podrias hacer.

  8. laboralis 16 septiembre 2010 at 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!

  9. miguelortega 17 agosto 2010 at 18:52

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

  10. adrian 17 agosto 2010 at 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”!!

  11. Liz Palacios 22 septiembre 2009 at 10:22

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

  12. Jorge 21 septiembre 2009 at 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

  13. jose 8 septiembre 2009 at 21:14

    Ok gracias

  14. lalo2302 8 septiembre 2009 at 21:04

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

    Thank you, Gracias

  15. Alex Aguiar 8 septiembre 2009 at 19:39

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

  16. jose 8 septiembre 2009 at 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"}];

  17. Alex Aguiar 7 septiembre 2009 at 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)

  18. jose 7 septiembre 2009 at 21:29

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

  19. jose 7 septiembre 2009 at 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

  20. jose 7 septiembre 2009 at 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

  21. Alex Aguiar 7 septiembre 2009 at 20:42

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

  22. jose 7 septiembre 2009 at 20:35

    Please IE6.0 Buttons Problem.. PLEASE

Leave a reply

Your email address will not be published. Required fields are marked *