Cross-browser jQuery Any Content Slider Plugin With jQuery

A simple, responsive, cross-browser jQuery slider/slideshow plugin that uses CSS3 for the smooth slide or fade transition between inner content. Also provides a basic slider function for the old browsers that don't support CSS3 animations.

How to use it:

1. Load the plugin's style sheet simple-slide-show.css in the head section of the html page.

<link rel="stylesheet" href="simple-slide-show.css">

2. The plugin allows to embed any web content as follows:

<div class="simple-slide-show loading">
  <ul>
    <li class="on">
      <figure style="background-color: #ccc;">
        <h1>First Slide</h1>
      </figure>
    </li>
    <li>
      <figure style="background-color: #999;">
        <h1>Second Slide</h1>
      </figure>
    </li>
    <li>
      <figure style="background-image: url('bg.jpg');"></figure>
    </li>
  </ul>
</div>

3. Load jQuery and the plugin's JavaScript file simple-slide-show.js at the end of the page..

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="simple-slide-show.js"></script>

4. Invoke the plugin with default settings.

$( '.simple-slide-show' ).simpleSlideShow();

5. Plugin's default settings.

$( '.simple-slide-show' ).simpleSlideShow({

  // autoplay
  autoplay: true,

  // shows controls
  controls: true,
  index: true,

  // 'slide' or 'fade'
  effect: 'slide',

  // auto resize for responsive layout
  autosize: true
  
});

Change log:

2016-11-28

• JS clean up

2016-11-07

• update UI.
• correct slide transition-duration value retrieval timing

2016-11-01

• transparent slide compatibility

2016-10-21

• update loading

2016-10-19

• update ui

---

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