<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class='g-carousel'> <a class='prev' href='#'><</a> <a class='next' href='#'>></a> <ul class='carousel'> <li> <img src='http://th05.deviantart.net/fs71/200H/f/2013/217/c/5/beauty_nature_by_darshsasalove-d6gnpfg.jpg'> </li> <li> <img src='http://truth-saves.com/images/natural-beauty.jpg'> </li> <li> <img src='http://images.all-free-download.com/images/graphicmedium/beauty_of_nature_14_210801.jpg'> </li> <li> <img src='http://static.funnypik.com/the-unseen-beauty-of-nature-image_256164.jpg'> </li> <li> <img src='http://images.all-free-download.com/images/graphicmedium/beauty_of_nature_3_209842.jpg'> </li> <li> <img src='http://www.prestigehw.com/CLIENTES/prestige.igmtech.com/imagenes/hoteles/SPORTING/sporting_destino.jpg'> </li> <li> <img src='http://wellness-shop.co.uk/img/items/small/1825.jpg'> </li> <li> <img src='http://www.bestmoviesbyfarr.com/images/newsletters/newsletter113_theme.jpg'> </li> <li> <img src='http://www.funcanada.ca/uploads/files/2013/08/queen-elizabeth-park-gardens-in-canada.jpg'> </li> <li> <img src='http://go2taiwan.net/img/tainan_03.jpg'> </li> <li> <img src='http://www.freewarepocketpc.net/wp7/img/friendship-calculator.png'> </li> <li> <img src='http://dc404.4shared.com/img/VEKgCRHd/13d78522838/EmoQuotes.jpg'> </li> <li> <img src='http://www.af-music.de/wp-content/uploads/2011/01/curious-arrhythmia-thumb.jpg'> </li> </ul> </div>

.g-carousel .prev, .g-carousel .next { text-decoration: none; margin: 0; padding: 0; display: inline-block; height: 100%; min-height: 20px; width: 40px; background: #ccc; text-align: center; line-height: 200px; position: relative; z-index: 5; } .g-carousel { overflow: hidden; position: relative; margin: 0 auto; height: 200px; width: 880px; } .g-carousel .prev { float: left; } .g-carousel .next { float: right; } .g-carousel ul.carousel { position: absolute; top: 0; height: 200px; margin: 0; left: 40px; right: 40px; padding: 0; } .g-carousel ul.carousel li { width: 200px; list-style-type: none; float: left; }

(function() { $(document).ready(function() { var $carouselList, $width, currentItem, initLeft, numberOfItems, totalNumberOfItems; initLeft = 40; $width = 800; numberOfItems = 4; $carouselList = $('ul.carousel'); totalNumberOfItems = $carouselList.children().size(); currentItem = numberOfItems; $('a.next').on('click', function() { var left; left = parseInt($carouselList.css('left')); left = left - 200; if (currentItem === totalNumberOfItems) { left = initLeft; currentItem = numberOfItems; } else { currentItem += 1; } return $carouselList.animate({ 'left': left + "px" }, 400); }); return $('a.prev').on('click', function() { var left; left = parseInt($carouselList.css('left')); left = left + 200; if (currentItem === numberOfItems) { left = initLeft - 200 * (totalNumberOfItems - numberOfItems); currentItem = totalNumberOfItems; } else { currentItem -= 1; } return $carouselList.animate({ 'left': left + "px" }, 400); }); }); }).call(this);