Automatic jQuery Image Slideshow Carousel with CSS3 Transitions - Photo Carousel

A simple yet robust jQuery slideshow plugin which allows the visitor to circle through a set of photos with CSS3 slide animations. Featuring image lazy load, auto-rotation, pause on hover, arrows navigation, thumbnails indicator, image captions, infinite loop and much more.

How to use it:

1. Load the required JavaScript libraries at the bottom of the document so the page loads faster.

<!-- jQuery Library -->
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- For cross browser CSS3 transitions -->
<script src="transition.js" type="text/javascript"></script> 

2. Add the thumbnails into the photo carousel following Html structure as below. Use img's data-big attribute to specify the sources of large images.

<div id="photo-carousel" class="carousel">
  <div class="carousel-inner">
    <div class="item prev"> <img> </div>
    <div class="item active"> <img src="img/1_large.jpg"> </div>
    <div class="item next"> <img> </div>
  </div>
  <ul class="carousel-thumbnails">
    <li class="active"><img src="img/1_thumb.jpg" alt="Alt 1" data-big="img/1_large.jpg"></li>
    <li><img src="img/2_thumb.jpg" alt="Alt 2" data-big="img/2_large.jpg"></li>
    <li><img src="img/3_thumb.jpg" alt="Alt 3" data-big="img/3_large.jpg"></li>
    ...
  </ul>
  <a class="arrow left-arrow active"></a>
  <a class="arrow right-arrow active"></a>
  <div class="description">description of photo 1</div>
</div>

3. The sample CSS to style the photo carousel. Feel free to override the styles to fit your design needs.

.carousel { position: relative; }

.carousel img {
  width: 100%;
  height: 100%;
}

.carousel .arrow {
  position: absolute;
  top: 50%;
  margin-top: -30px;
  z-index: 2;
  display: none;
  height: 55px;
  width: 55px;
  background: url(img/arrows.png) no-repeat;
  cursor: pointer;
}

.carousel .arrow.active { display: block; }

.carousel .left-arrow {
  left: 10px;
  background-position: -242px -33px;
}

.carousel .right-arrow {
  right: 10px;
  background-position: -304px -33px;
}

.carousel-inner {
  overflow: hidden;
  position: relative;
  width: 100%
}

.carousel-inner>.item {
  position: relative;
  display: none;
  -webkit-transition: .6s ease-in-out left;
  transition: .6s ease-in-out left;
}

.carousel-inner>.item.no-transition { transition : none; }

.carousel-inner>.active,
.carousel-inner>.next,
.carousel-inner>.prev { display: block; }

.carousel-inner>.active {
  left: 0;
  z-index: 1;
}

.carousel-inner>.next,
.carousel-inner>.prev {
  position: absolute;
  top: 0;
  width: 100%;
}

.carousel-inner>.next { left: 100%; }

.carousel-inner>.prev { left: -100%; }

.carousel-inner > .next.move-left,
.carousel-inner > .prev.move-right { left: 0; }

.carousel-inner>.active.move-left { left: -100% }

.carousel-inner>.active.move-right { left: 100%; }

.carousel-thumbnails {
  border: 1px solid #444;
  background : #444;
  overflow: hidden;
}

.carousel-thumbnails li {
  float: left;
  width: 55px;
  height: 55px;
  border: 2px solid #444;
  cursor: pointer;
}

.carousel-thumbnails li.active { border: 2px solid #0896ff; }

.carousel .description {
  position: absolute;
  bottom: 100px;
  z-index: 2;
  width: 300px;
  left: 50%;
  margin-left: -150px;
  text-align: center;
  background: #444;
  padding: 10px;
  color: white;
  opacity: 0.6;
  border-radius: 5px;
}

4. Initialize the plugin on the parent container. That's it.

$("#photo-carousel").carousel();

---

This awesome jQuery plugin is developed by jsrockstar132. For more Advanced Usages, please check the demo page or visit the official website.