Cross-browser jQuery Any Content Slider Plugin With jQuery

Cross-browser jQuery Any Content Slider Plugin With jQuery
File Size: 831 KB
Views Total: 1622
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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">
    <li class="on">
      <figure style="background-color: #ccc;">
        <h1>First Slide</h1>
      <figure style="background-color: #999;">
        <h1>Second Slide</h1>
      <figure style="background-image: url('bg.jpg');"></figure>

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

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


  • JS clean up


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


  • transparent slide compatibility


  • update loading


  • update ui

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