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; }
|