Lid | 
                         | 
                        Raar!... mijn code hieronder: 
 
    
    
        
            
                $(function(){
	$('#slides').slides({
		preload: true,
		preloadImage: 'images/loading.gif',
		play: 5000,
		pause: 2500,
		hoverPause: true,
		pagination: false,
		generatePagination: false
	});
});
             
            $(function(){ 	$('#slides').slides({ 		preload: true, 		preloadImage: 'images/loading.gif', 		play: 5000, 		pause: 2500, 		hoverPause: true, 		pagination: false, 		generatePagination: false 	}); }); 
 
  
         
          
     
  
 
 
    
    
        
            
                            <div class="slider">
                <div id="slides">
                	<div class="previous-btn">
                    	<a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
                    </div>
                    <div class="slides_container">                        
                        <?=slider()?>
                    </div>
                    <div class="next-btn">
                    	<a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
                    </div>
                </div>
                
            </div>
             
            <div class="slider">                 <div id="slides">                 	<div class="previous-btn">                     	<a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>                     </div>                     <div class="slides_container">                                                 <?=slider()?>                     </div>                     <div class="next-btn">                     	<a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>                     </div>                 </div>               </div> 
 
  
         
          
     
  
 
Ik gebruik http://slidesjs.com/ en mijn CSS is als volg: 
 
    
    
        
            
                .slides_container {
	width:561px;
	height:170px;
	float:left;
	display:none;
}
.slides_container .slide {
	width:561px;
	height:170px;
	display:block;
}
.item {
	float:left;
	width:167px;
	height:135px;
	margin:0 10px;
	background:#efefef;
}
.pagination {
	list-style:none;
	margin:0;
	padding:0;
}
.pagination .current a {
	color:red;
}
.previous-btn {
	width:24px;
	height:170px;
	float:left;
	margin:0 2px 0 10px;
}
.next-btn {
	width:24px;
	height:170px;
	float:left;
	margin-left:10px;
}
.previous-btn img, .next-btn img {
	margin-top:80px;	
}
.lightmsg {
	display:inline-block;
	margin-right:50px;
	min-width:10px;
}
             
            .slides_container { 	width:561px; 	height:170px; 	float:left; 	display:none; }   .slides_container .slide { 	width:561px; 	height:170px; 	display:block; }   .item { 	float:left; 	width:167px; 	height:135px; 	margin:0 10px; 	background:#efefef; }   .pagination { 	list-style:none; 	margin:0; 	padding:0; }   .pagination .current a { 	color:red; }   .previous-btn { 	width:24px; 	height:170px; 	float:left; 	margin:0 2px 0 10px; }   .next-btn { 	width:24px; 	height:170px; 	float:left; 	margin-left:10px; }   .previous-btn img, .next-btn img { 	margin-top:80px;	 }   .lightmsg { 	display:inline-block; 	margin-right:50px; 	min-width:10px; } 
 
  
         
          
     
  |