Basic Image Gallery / Slideshow Plugin with jQuery - simpleSlides

simpleSlides is a simple, unobtrusive jQuery plugin used for presenting your images in a navigatable slideshow carousel with fadeIn & fadeOut transition effects.

How to use it:

1. Wrap the images you want to present into a container as follow. You can use the data-caption attribute to specify the image captions that will be displayed at the bottom of the slideshow carousel.

<div class="simpleSlides">
  <img src="1.jpg" data-caption="First Caption">
  <img src="2.jpg" data-caption="Second Caption">
  <img src="3.jpg" data-caption="Third Caption">
</div>

2. Place jQuery library and the jQuery simpleSlides plugin at the end of the html document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jQuery.simpleSlides.js"></script>

3. The required CSS styles.

.caption {
  position: relative;
  bottom: 12px;
  font-size: 18px;
  text-shadow: 1px 1px black;
  color: white;
}

.captionDiv {
  text-align: center;
  background-color: rgba(0, 0, 0, .2);
}

.rightArrow {
  position: absolute;
  right: 0;
  cursor: pointer;
}

.leftArrow {
  position: absolute;
  left: 0;
  cursor: pointer;
}

4. Initialize the slideshow carousel with default options.

$('.simpleSlides').simpleSlides();

5. Default plugin options. You can pass in the options to the plugin during initialization.

$('.simpleSlides').simpleSlides({

  // height of div containing photo caption and directional arrows
  captionDivHeight: 35,

  // size of SVG arrow icons
  iconSize: 25,

  // width of slideshow
  width: 500,

  // height of slideshow
  height: 370,

  // fade duration when stepping to next photo
  fadeDuration: 550
  
});

---

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