I have a mini image carousel displaying 8 pictures, but only showing 5 at a time while the others remain hidden.
Here is the HTML structure:
<div id="itemsListBox">
<ul>
<li><img src="images/home-items/washing_machine.png" alt="" /></li>
<li><img src="images/home-items/refrigerator.png" alt="" /></li>
<li><img src="images/home-items/dishwasher.png" alt="" /></li>
<li><img src="images/home-items/ovens_stoves_hobs.png" alt="" /></li>
<li><img src="images/home-items/extractors.png" alt="" /></li>
<li><img src="images/home-items/microwave_oven.png" alt="" /></li>
<li><img src="images/home-items/coffee_makers.png" alt="" /></li>
<li><img src="images/home-items/washer_dryer.png" alt="" /></li>
<li><img src="images/home-items/tumble_dryer.png" alt="" /></li>
</ul>
</div>
Below is the corresponding CSS styling:
#itemsListBox {
position: absolute;
top: 90px;
width: 100%;
padding: 0 10%;
overflow: hidden;
}
#itemsListBox ul {
white-space: nowrap;
overflow: hidden;
}
#itemsListBox ul li{
list-style-type: none;
display: inline-block;
width: 18%;
margin: 1%;
}
#itemsListBox ul li img {
width: 100%;
}
To add animation when moving images, you can use this JavaScript code:
$("#rightArrow").click(function(e) {
var curr = $("#itemsListBox ul li:last");
curr.parent().prepend(curr);
});
$("#leftArrow").click(function(e) {
var curr = $("#itemsListBox ul li:first");
curr.parent().append(curr);
});
If you want to enhance the transition with animations, consider using jQuery effects. Any suggestions?
Check out the live demo here: http://jsfiddle.net/Bergkamp/shnyH/