Simple Cross-fading Background Image Slideshow Plugin with jQuery

An extremely simple jQuery plugin to display a set of images as a background carousel/slideshow with cross-fade transitions.

How to use it:

1. Load jQuery JavaScript library and the jquery.slideshow.js script in the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.slideshow.js"></script>

2. Prepare your images (slideshow-1.jpg, slideshow-2.jpg, slideshow-3.jpg and so on) and place them under the 'assets' folder.

3. The Html structure for the image slideshow.

<div class="container"> 
  <div class="slideshow">
    <div class="image"></div>
    <ul class="selectors">
      <li><a href="javascript:slideshow_skip(1, true)">
        <div class="button"></div>
        </a></li>
      <li><a href="javascript:slideshow_skip(2, true)">
        <div class="button"></div>
        </a></li>
      <li><a href="javascript:slideshow_skip(3, true)">
        <div class="button"></div>
        </a></li>
      <li><a href="javascript:slideshow_skip(4, true)">
        <div class="button"></div>
        </a></li>
    </ul>
  </div>
</div>

4. The required CSS styles for the image slideshow.

.slideshow {
  width: 825px;
  height: 550px;
  margin: 0px auto;
  position: relative;
}

.slideshow .image {
  width: 100%;
  height: 100%;
}

.slideshow .selectors {
  list-style: none;
  padding: 0px;
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 50px;
}

.slideshow .selectors li { display: inline-block; }

.slideshow .button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.5);
}

.slideshow .selected .button { background-color: rgba(0,0,0,0.5); }

5. That's it. You can override the plugin parameters at the beginning of the jquery.slideshow.js.

var current = 0,
    loop,
    runningLoop = null,
    image = '.image',
    fade = 300,
    loopDelay = 2000,
    imageMaxCount = 4;

---

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