NemProgrammering.dk logo

Simpelt slideshow med CSS3 og jQuery

  Skrevet af: Redaktionen     04-11-2012     Skrevet i: CSS og CSS3, HTML + HTML5, JQuery

Køb vores jQuery kursus som download
I dette indlæg vil jeg dele en super simpel måde at lave et slideshow på. Alt hvad du skal bruge er et lille stykke html kode, lidt CSS og så en yderst simpel jQuery funktion. Slideshowet er med auto-play funktionalitet, hvilket

Først og fremmest skal du bruge følgende stykke html kode:

<div id="slideshow">
<div><img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" alt="" /></div>
<div><img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg" alt="" /></div>
<div>Meget cool ikke? Du kan selv skifte billederne ud eller tilføje flere!</div>
</div>

Herefter skal du tilføje nedenstånde i dit CSS sheet. Der bruges en smule CSS3 til skyggen og ellers har vi stylet den således at den placeres midt på siden. Du kan selvfølgelig selv rette den til.

#slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

Og her til sidst kommer jQuery koden – Den der får al magien til at ske. Du kan placere denne kode lige inden </head> og så skulle det gerne virke:

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	<script>
		$(function() {
		
			$("#slideshow > div:gt(0)").hide();
	
			setInterval(function() { 
			  $('#slideshow > div:first')
			    .fadeOut(1000)
			    .next()
			    .fadeIn(1000)
			    .end()
			    .appendTo('#slideshow');
			},  3000);
			
		});
	</script>

Og så skulle alt gerne virke! Du kan se en live demo her: Demo

Spørgsmål og kommentarer

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.

  • Claus siger:

    Hejsa og mange tak for tilgængeligheden af koden , jeg har desværre tre udfordringer

    1) jeg har ikke kodet i CCS , men i PHP og der hvor jeg indsætter CSS koden vises kodning teksten online ?

    2) hvor skriver man den ønsket størrelse på format billederne skal vises i , dit link viser små søde billeder mit viser stor billeder og for stor billeder ?

    3) min scool håber også i forbindelse med diashowet

    1. Thomas I. siger:

      Hej Claus,

      Svar på spørgsmål:

      1. Husker du at indsætte din css inline korrekt? Se evt. her: https://www.nemprogrammering.dk/Tutorials/CSS/V2/2-style-sheets.php
      2. Billederne vises i det format/størrelse ud uploader dem i. Du skal altså lave dine billeder mindre i f.eks. Photoshop, hvis de skal gøre mindre. Alternativt skal du sætte en width og height på dine img tags.
      3. Er ikke helt sikker på hvad du mener?

  • Tom Kristensen siger:

    Hej igen

    der er ikke problemer billederne vises i deres rigtige størrelse selv om jeg ikke retter
    “width: 240px;
    height: 240px;”

    mvh. Tom

  • Tom Kristensen siger:

    Hej
    tak for en god hjemmeside, der giver god inspiration og læring. Jeg har et spørgsmål, er det muligt at lave et slideshow med både portrait og landskape i samme show, evt. med class? eller skal der mere javascript til?

    mange hilsner og godt nytår
    Tom

  • Lina siger:

    Jeg forstår ikke hvor jQuery koden skal placeres? Foran ? Hvor er det? :-)
    mvh Lina

    1. Thomas I. siger:

      Hej Lina,
      I dit html dokument har du et indhold tag. Det er lige inden tagget, at du skal indsætte jQuery koden.
      Mvh.

  • Alexander siger:

    Tak Thomas!

    Har længe ventet på det. Ved endelig ikke hvorfor jeg ikke har skrevet på forummet?

    //Alexander