Create A Slideshow With Images Or Any HTML Content - Slideshow.js

A really simple and lightweight jQuery plugin to create an automatic slideshow with photos, text, videos, or any HTML content you can imagine.

How to use it:

1. Add a group of slides to the slideshow.

<div id="slideshow">
  <div class="slides">
    <a href="#" class="slide">
      <img src="https://source.unsplash.com/DgvTzwsjJ4Y/800x400" alt="" />
    </a>
    <a href="#" class="slide">
      <img src="https://source.unsplash.com/8W0TodtpMOQ/800x400" alt="" />
    </a>
    <a href="#" class="slide">
      <img src="https://source.unsplash.com/YYUuL0sOGUI/800x400" alt="" />
    </a>
    <a href="#" class="slide">
      <img src="https://source.unsplash.com/UhxJSJmT1R4/800x400" alt="" />
    </a>
    <a href="#" class="slide">
      <img src="https://source.unsplash.com/Y0_uWiKqPc0/800x400" alt="" />
    </a>
  </div>
</div>

2. Insert the main JavaScript slideshow.js after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/slideshow.js"></script>

3. Create pagination controls at the bottom of the slideshow. OPTIONAL.

<div class="controls">
  <a href="#" class="control">1</a>
  <a href="#" class="control">2</a>
  <a href="#" class="control">3</a>
  <a href="#" class="control">4</a>
  <a href="#" class="control">5</a>
</div>

4. Initialize the slideshow plugin and done.

$('#slideshow').slideshow();

5. The example CSS to style the slideshow and pagination controls.

#slideshow {
  position: relative;
}

#slideshow .slides {
  z-index: 109;
}

#slideshow .slides .slide img {
  width: 100%;
}

#slideshow .controls {
  position: absolute;
  z-index: 101;
  left: 30px;
  bottom: 30px;
  width: auto;
  margin: 0 auto;
  overflow: hidden;
  display: block;
}

#slideshow .controls .control {
  background-color: #ffffff;
  padding: 5px 10px;
  margin: 0 5px;
  text-decoration: none;
  color: #000000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
  display: inline-block;
  float: left;
}

6. Optimize the slideshow on mobile devices.

@media (max-width:979px) {
  .slides {
    width: 100%;
  }

  .slides .slide {
    width: 100%;
  }

  .slides .slide img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

---

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