Basic Auto- Fading/Sliding Slideshow Plugin For jQuery - jslide

jslide is a fresh new jQuery slideshow plugin used to create a basic auto fading/sliding carousel slideshow with minimal html markups.

Features:

• Simple and easy to implement.
• Easing effects. Requires jQuery easing plugin.
• Multiple instance in one page.
• Fully custom navigation and pagination.
• Auto play on page loaded.
• Endless loop like a carousel.
• Cross browser. Supports all modern browsers and even IE 7/8.

Basic Usage:

1. Include jQuery library and the jQuery jslide plugin at the bottom so the pages load faster.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jslide.js"></script>

2. Include jQuery easing plugin for easing options (Optional).

<script src="jquery.easing.min.js"></script>

3. The Html to create a slideshow with next/prev navigation.

<div id="slides-demo">
  <ul class="slides">
    <li class="slide"><img src="images/1.png"></li>
    <li class="slide"><img src="images/2.png"></li>
    <li class="slide"><img src="images/3.png"></li>
  </ul>
  <nav class="slide-pagination">
   <a class="prev-slide" href="#">&laquo;</a>
   <a class="next-slide" href="#">&raquo;</a>
  </nav>
</div>

4. Initialize the plugin with one JS call. Navigation is actually enabled by inserting the Html. The plugin looks for elements inside the outer element (the one you call the plugin on) that match the selectors for a Next and Previous link and binds the corresponding click events to them.

$('#slides-demo').jslide()

5. Available options.

// debug mode
debug: false,

// auto play
play: true,

// transition delay
timer: 1000,

// animation speed
speed: 750,

// easing options. 
easing: 'easeOutQuint',

// slide or fade
mode: 'slide',

// enable pagination
pagination: false,

// slideshow width
width: 600,

// slideshow height
height: 350,

// selectors
wrapper: 'ul.slides',
animationWrapper: 'ul.slides-wrapper',
slides: 'li.slide',
activeClass: 'active',
paginationClass: 'slide-pagination',
slidetoClass: 'goto-slide',
next: 'a.next-slide',
prev: 'a.prev-slide'

---

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