Basic Image Gallery / Slideshow Plugin with jQuery - simpleSlides

File Size: 7.26 KB
Views Total: 1076
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">

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

<script src="//"></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.


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


  // 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.