caroufredsel
HTML
<script src="http://gastraserv.dyndns.org/glasow-3d/modules/mod_gbr_caroufredsel/js/jquery.carouFredSel-6.2.0-packed.js"></script>
<div class="image_carousel">
<div id="foo1">
<img src="http://gastraserv.dyndns.org/glasow-3d/images/prozess/bild1.jpg" alt="images/prozess/bild1.jpg"><img src="http://gastraserv.dyndns.org/glasow-3d/images/prozess/massstab.jpg" alt="images/prozess/massstab.jpg"><img src="http://gastraserv.dyndns.org/glasow-3d/images/prozess/prozess_1.jpg" alt="images/prozess/prozess_1.jpg"><img src="http://gastraserv.dyndns.org/glasow-3d/images/prozess/prozess_2.jpg" alt="images/prozess/prozess_2.jpg"><img src="http://gastraserv.dyndns.org/glasow-3d/images/prozess/prozess_3.jpg" alt="images/prozess/prozess_3.jpg"></div> <div class="clearfix"></div>
<a class="prev" id="foo1_prev" href="#" style="display: block;"><span>prev</span></a>
<a class="next" id="foo1_next" href="#" style="display: block;"><span>next</span></a>
</div>
CSS
#foo1 {
margin: 0;
padding: 0;
}
.image_carousel {
padding: 15px 0 15px 45px;
position: relative;
width: 90%;
height: 325px;
}
.image_carousel img {
width: 200px;
box-shadow: 0 0 7px 0px #999;
background-color: white;
padding: 9px;
margin: 7px;
display: block;
float: left;
}
JavaScript
jQuery(window).load(function() {
var carousel = jQuery("#foo1");
carousel.carouFredSel({
auto : false,
responsive : false,
prev : "#foo1_prev",
next : "#foo1_next",
scroll: 1,
items: {
visible: {
min: 1,
max: 3
}
}
}).parent().css("margin", "auto");
});