)
**
**
<**img src**\=http://cloud.github.com/downloads/malsup/cycle/beach1.jpg width="620" height="200" alt="Slideshow" **class="first"**/>
<**img src**\="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="620" height="200" alt="Slideshow" />
<**img src**\="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="620" height="200" alt="Slideshow" />
<**img src**\="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="620" height="200" alt="Slideshow" />
**
**
Vi har alltså en div tag samt fyra bilder. Bilderna länkas med fullständig url, här laddas ett par externa bilder, med bredden 620 och höjden 200. Du kan ändra bredd och höjd till vad du vill, men alla bilder ska vara av samma storlek.
Antalet bilder begränsas bara av hur du vill att din sida ska se ut.
Vi har lagt till två klasser förutom id:et slideshow, jag kommer att förklara pics och first strax.
**Spara din kodmall och öppna istället din sidmall.**
## Comment 1
Author: Khora
Vi ska alltså lägga till följande:
ett id som heter slideshow: #slideshow
ett id som heter naw: #nav
en class som heter pics: .pics
och en class som heter first: .first.
Klistra in nedanstående i din kodmall och spara.
(Den här gången finns beskrivningen i själva koden)
#slideshow {width:620px;} **/\* Bredden på bildspelet är samma som på bilden vi använder. \*/**
#slideshow img {
width:620px; **/\* ska vara samma bredd som på bilderna du valt \*/**
height: 200px; **/\* ska vara samma höjd som på bilderna du valt \*/**
border-radius: 6px; **/\* Ger rundade hörn på bilden\*/**
border:1px solid #fff; **/\* Ger bilden en vit ram 1 pixel bred \*/**
display: none **/\* Viktigt! hindrar att alla bilder visas när sidan laddas. \*/**
}
#slideshow img.first { display: block } **/\* Gör så att den första bilden visas när sidna laddas. \*/**
#nav {width: 620px; margin-top:10px; border-radius: 6px;} **/\* Bredd, marginal och rundade hörn på navigeringen \*/**
#nav li {
width: 50px; **/\* bredd på tummnagel \*/**
float: left; **/\* Vänsterställd \*/**
margin-right:20px; **/\* Avståndet mellan tummnaglarna \*/**
list-style: none; **/\* Gör så att listan inte har någon markering eller räknare \*/**
border-radius: 6px; **/\* rundade hörn \*/**
}
#nav a {
width: 50px;
padding: 3px; **/\* Lägg till lite avstånd \*/**
display: block;
border: 1px solid #ccc; **/\* färg och storlek på ramen runt tummnageln\*/**
border-radius: 6px; **/\*rundade hörn\*/**
}
#nav li.activeSlide a { border: 1px solid #6d7583; border-radius: 6px;}
**/\*Ger tummnageln en annan färg på ramen när den är aktiv. \*/**
#nav a:focus { outline: none; }
#nav img {border: none; display: block; border-radius: 6px;}
**/\* vi har en ram på länken, så vi vill inte ha någon ram på bilden \*/**
Klart!
Hoppas beskrivningen inte var för svår.
Exempel: [http://blueheartdesign.blogg.se/](http://blueheartdesign.blogg.se/)
okej, ifokus fixar inte det här med kod eller radavstånd särskilt bra..
Ni ska alltså inte ladda ner några bilder eller .js filer ( ifokus gör dem till länkar) utan de ska bara länkas in.
## Comment 2
Author: MajaL
Tjusigt! Du vill inte skriva den som artikel? Och göra små printscreen till.
PMa om du är intresserad! :)