Minimal jQuery Slideshow with Thumbnail Navigation - Amichels Slider

Yet another jQuery plugin for creating an image slideshow/carousel that features auto rotation, custom slide animations and thumbnails navigation.

How to use it:

1. Insert your images with caption text into your document following the markup structure like below. The plugin will automatically generate a thumbnails navigation at the bottom of the slideshow/carousel.

<div class="carousel-wrap">
  <div class="carousel-con">
    <div class="carousel">
      <div class="carousel-slide"> <img class="carousel-img" src="images/slide1.jpg">
        <div class="carousel-caption">
          <h2 class="carousel-cap-header">Slide 1</h2>
          <p class="carousel-cap-desc">Description 1</P>
        </div>
      </div>
      <div class="carousel-slide"> <img class="carousel-img" src="images/slide2.jpg">
        <div class="carousel-caption">
          <h2 class="carousel-cap-header">Slide 2</h2>
          <p class="carousel-cap-desc">Description 2</P>
        </div>
      </div>
      <div class="carousel-slide"> <img class="carousel-img" src="images/slide3.jpg">
        <div class="carousel-caption">
          <h2 class="carousel-cap-header">Slide 3</h2>
          <p class="carousel-cap-desc">Description 3</P>
        </div>
      </div>
      <div class="carousel-slide"> <img class="carousel-img" src="images/slide4.jpg">
        <div class="carousel-caption">
          <h2 class="carousel-cap-header">Slide 4</h2>
          <p class="carousel-cap-desc">Description 4</P>
        </div>
      </div>
    </div>
  </div>
  <div class="carousel-thumbs cf"></div>
</div>

2. The core CSS to style the image slideshow/carousel.

.carousel-con {
  margin-bottom: 1px;
  height: 331px;
  overflow: hidden;
  position: relative;
}

.carousel { position: relative; }

.carousel-slide {
  position: relative;
  float: left;
}

.carousel-img { display: block; }

.carousel-caption {
  background: url(../images/white-trans-bg.png);
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 14px;
  color: #282b2e;
}

.carousel-cap-header {
  margin: 0;
  font-size: 24px;
  text-transform: uppercase;
}

.carousel-cap-desc {
  margin: 0;
  font-size: 14px;
}

.carousel-thumbs { text-align: center; }

.carousel-thumb-item {
  padding-top: 12px;
  margin-right: 10px;
  display: inline-block;
  zoom: 1;
 *display: inline;
  width: 159px;
  position: relative;
}

.carousel-thumb {
  display: block;
  width: 100%;
  cursor: pointer;
}

.carousel-thumb-active { background: url(../images/carousel-arw.png) 50% 0 no-repeat; }

.carousel-thumb-active .carousel-thumb-over {
  border: 3px solid #0084d9;
  position: absolute;
  top: 9px; /* height of carousel background img */
  z-index: 10;
  bottom: 0;
  left: 0;
  right: 0;
}

.carousel-thumb-last { margin-right: 0; }

3. Include jQuery CDN and the jQuery Amichels Slider plugin at the end of the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="scripts/jquery.amichels.slider.js"></script>

4. Call the plugin on the wrapper element to create a basic image slideshow/carousel with default settings.

$(document).ready(function(){
  $(".carousel-wrap").carousel();
});

5. All the default settings.

$("SELECTOR").carousel({

// contains all the carousel elements
carouselWrap: ".carousel-wrap", 

// carousel element
carousel: ".carousel", 

// slide element
slide: ".carousel-slide",

// thumbnail control container
thumbCon: ".carousel-thumbs", 

// thumbnail control element
thumb: ".carousel-thumb-item", 

// start slide
startingSlide: 0,

// speed moving to next slide
speed: 500, 

// time between slide moves
duration: 5000, 

// auto-rotation
auto: false, 

// pause if user's mouse enters carouselWrap area
pauseOnHover: true 

});

---

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