Slideshow på forsiden

Du kunne jo evt. anvende nivo slider.
Det er et jquery plugin som er utrolig simpelt at anvende.

Tjek det ud her

har du eller anden date information i din tabel? for så kan du gøre:

 SELECT * FROM showroom 
 ORDER BY date desc
 LIMIT 10

Jeg bruger easy slider http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

Og med den kan du sagtens lave noget magen til det på boligportal.dk

Jeg har lige lavet noget på min forside her: http://brugtfotoudstyr.dk med easy-slider. Du er nødt til at rette positionerne på #slider1next a og #slider1prev i din css, for at få det til at passe, hvilket jeg også gjorde da min slider div ikke er af samme størrelse som den der er i std. demoen.

Nej, der er ingen date information, systemet kan dog sortere via ID. Så jeg gør altså bare således:

 <div id="slideshow"><?php
 $sql = mysql_query("SELECT * FROM showroom ORDER BY id desc LIMIT 10");
  while ($show = mysql_fetch_assoc($sql)) {
  echo '<p><b>'.$show['titel'].'</b></p>
  <img src="'.$show['billede'].'" width="100px" height="100px" />';?></div>

Men nu hvor jeg så har hentet de seneste 10 poster ud, skal jeg jo have lavet det der slideshow. Jeg har en gang brugt et slideshow i JavaScript, som automatisk skiftede billede ved et bestemt interval, men det dur ikke her, fordi godt nok skal slideshowet køre automatisk, men det skal også kunne lade sig gøre at bladre frem og tilbage i det.

@Daniel - Det er et rigtigt godt forslag, dog søger jeg noget lidt mere simpelt, såsom det der viser forsideannoncer her: http://www.boligportal.dk/
Jeg har kigget lidt i deres kildekode, men kan ikke rigtig finde ud af hvilket script de har brugt, andet end at det nok højest sandsynligt er jquery som base.

Var der nogen der havde nogle forslag til slideshow, som ligner det på boligportal.dk lidt mere?

Lige præcis Brian. Det er netop sådan en enkel slider jeg manglede, dog er der lidt problemer.
Jeg har tilføjet den css-kode der hører til easyslider 1.7 i min style.css for at have så få filer som muligt.
Jeg har inkluderet easyslider1.7.js i head og slideshow virker skam også, men der er lidt problemer.
Min CSS med easyslider:

 /***********Global************/
 body {
     font-family: arial;
     background-color: #CCC;
     font-size: 12pt;
 }
 h1, h2, h3, h4 {
     
 }
 a {
     color: #000;
 }
 /*********Content*********/
 #container {
     margin: auto; /*Placerer indholdet midt på siden*/
     width: 900px;
     background-color: #b8b8b8;
 }
 #banner {
     background-image: url(../images/banner.png);
     background-repeat: no-repeat;
     background-position: center;
     width: 900px;
     height: 75px;
 }
 #header {
     background-image: url(../images/header.png);
     background-repeat: no-repeat;
     background-position: center;
     background-color: #CCC;
     width: 900px;
     height: 310px;
 }
 #wrapper {
     
 }
 #menu {
     position: relative;
     top: -16px;
     background-image: url(../images/top.png);
     width: 900px;
     height: 25px;
 }
 .menu {
     position:relative;
     top: 2px;
     left: -30px;
     list-style: none; /*Fjerner punktopstilling af menu*/
 }
 .menu li {
     display: inline; /*Placerer menu vandret i stedet for lodret*/
     padding: 0 0 0 10px;
 }
 .menu a {
     text-decoration: none;
 }
 .menu a:hover {
     text-decoration: none;
     font-weight: bold;
 }
 #content {
     position: relative;
     background-color: #FFF;
     width: 830px;
     left: 35px;
     top: -5px;
 }
 #content h1,p {
     padding-left: 10px;
     padding-right: 10px;
     word-wrap: break-word;
 }
 #content:before, #content:after {
     content: "";
     background: transparent url(../images/content-corner.png) left top no-repeat;
     position: absolute;
     left: 0;
     width: 830px;
     height: 14px;
     display: block;
 }
 #content:before {
     top: -12px;
 }
 #content:after {
     background-position: 0 -15px;
     bottom: -14px;
 }
 #login {
     display: none;
 }
 .logind {
     margin-top: 25px;
     margin-right: 10px;
     display: block;
     width: 100px;
     height: 25px;
     background: url(../images/buttons.png) no-repeat 0 0;
     outline: none;
     color: #FFF;
 }
 a.logind:hover, a.logind:focus {
     background: url(../images/buttons.png) no-repeat 0 -25px;
     color: #FFF;
 }
 a.logind:active {
     background: url(../images/buttons.png) no-repeat 0 -50px;
     color: #000;
 }
 .showroom {
     list-style: none;
 }
 #backend {
     position: relative;
     left: 110px;
     width: 610px;
     height: 100px;
     background-repeat: no-repeat;
     background-position: center;
     padding-top: 30px;
     text-align: center;
 }
 #footer {
     background-image: url(../images/footer.png);
     background-repeat: no-repeat;
     background-position: center;
     background-color: #CCC;
     width: 900px;
     height: 140px;
 }
 #credits {
     text-align: center;
     font-size: 8pt;
     background-color: #CCC;
 }
 /* Easy Slider */
 
     #slider ul, #slider li,
     #slider2 ul, #slider2 li{
         margin:0;
         padding:0;
         list-style:none;
         }
     #slider2{margin-top:1em;}
     #slider li, #slider2 li{ 
         /* 
             define width and height of list item (slide)
             entire slider area will adjust according to the parameters provided here
         */ 
         width:800px;
         height:225px;
         overflow:hidden; 
         }    
     #prevBtn, #nextBtn,
     #slider1next, #slider1prev{ 
         display:block;
         width:30px;
         height:77px;
         position:absolute;
         left:-30px;
         top:71px;
         z-index:1000;
         }    
     #nextBtn, #slider1next{ 
         left:696px;
         }                                                        
     #prevBtn a, #nextBtn a,
     #slider1next a, #slider1prev a{  
         display:block;
         position:relative;
         width:30px;
         height:77px;
         background:url(../images/btn_prev.gif) no-repeat 0 0;    
         }    
     #nextBtn a, #slider1next a{ 
         background:url(../images/btn_next.gif) no-repeat 0 0;    
         }    
         
     /* numeric controls */    
 
     ol#controls{
         margin:1em 0;
         padding:0;
         height:28px;    
         }
     ol#controls li{
         margin:0 10px 0 0; 
         padding:0;
         float:left;
         list-style:none;
         height:28px;
         line-height:28px;
         }
     ol#controls li a{
         float:left;
         height:28px;
         line-height:28px;
         border:1px solid #ccc;
         background:#DAF3F8;
         color:#555;
         padding:0 10px;
         text-decoration:none;
         }
     ol#controls li.current a{
         background:#5DC9E1;
         color:#fff;
         }
     ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
     
 /* // Easy Slider */

Screenshot af resultat
Som I kan se, så er pilene øverst på siden og ikke nede i bunden hvor den gerne skulle stå.
Jeg laver slideshowet i en seperat php-fil, som ser således ud:

 <div id="slider">
     <?php
         $sql = mysql_query("SELECT * FROM boliger ORDER BY id desc LIMIT 10");
     ?>
     <ul class="menu">
         <?php
             while($slide = mysql_fetch_assoc($sql))
                 echo '<li>'.$slide['titel'].'<br /><img src="'.$slide['billede'].'" /></li>';
         ?>
     </ul>
 </div>

Jeg bruger så php include til at få det vist på siden.
Det burde jo ikke være noget problem og det er det som sådan ikke, men det er i CSS problemet opstår, fordi der er noget der ikke vil lade de pile komme derned hvor de skal være, og desuden viser den kun toppen af billedet der hvor slideshowet skal være(den lille blå boks, som er toppen af et billede).
Hvordan retter jeg det lille problem.

Efter en masse småjusteringer og grå hår har jeg endelig fået det til at virke:
Screenshot