Template:Team:Aachen/Gallery
From 2014.igem.org
<style type="text/css"> .clear{clear:both;}
.carousel-container{ width: 600px; height: 360px; float: left; margin: 0; padding: 0; position: relative; overflow: hidden; }
.right-arrow{
width: 60px;
height: 100%;
background-color: rgba(0,0,0,.5);
position: absolute;
right: 0;
margin: 0;
padding: 0;
z-index: 2;
}
.left-arrow{ width: 60px; height: 100%; background-color: rgba(0,0,0,.5); position: absolute; left: 0; margin: 0; padding: 0; z-index: 2; } .carousel-image-holder{ height:360px; width: 2400px; margin: 0; padding: 0; position: absolute; z-index: 1; }
.carousel-image-holder img{ width: 600px; float: left; margin: 0; padding: 0; display: inline-block; }
.carousel-buttons-container{ width: 600px; text-align: center; margin: 15px 0 0 0; padding: 0; }
.carousel-buttons-container ul{ list-style-type: none; margin: 0; padding: 0; }
.carousel-buttons{ background-color: #dddddd; height: 18px; width: 18px; border-radius: 50%; display: inline-block; margin: 0 10px 0 0; padding: 0; cursor: pointer; }
.carousel-buttons:last-of-type{ margin: 0; }
.active{ background-color: #e67e22; } </style>
<script type="text/javascript">
$(".left-arrow").hide();
var numImgs = $('div.carousel-image-holder img').length;
var addId = numImgs;
if(numImgs == 2){ var clicked = 0; imgCount = numImgs-2; }else if(numImgs <= 1){ $(".right-arrow").hide(); }else{ var clicked = 1; imgCount = numImgs-1; } if(numImgs > 2){ for (var i=0; i<numImgs; i++){
$("ul").prepend('<img src="" /> <img src="" /> <img src="" />
<img src="" />