Modern Banner Slider Plugin with jQuery - jquery.slides

A modern banner slider / carousel plugin for sliding infinitely through a group of images with support of custom animations & delays for the individual slide elements.

How to use it:

1. Load the slide.css stylesheet and slide.js script in your project which has jQuery library installed.

<link rel="stylesheet" href="css/slide.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/slide.js"></script>

2. Add background images along with the individual slide elements and navigation arrows into the slider. You can use the rel attribute to specify the animation type and delay for each child element.

<div class="slides">
  <div class="slideInner">
    <a href="#" style="background: url(1.jpg) no-repeat;">
      <div class="moveElem img1" rel="0,easeInOutExpo">
        <img src="1p1.png">
      </div>
      <div class="moveElem img2" rel="150,easeInOutExpo">
        <img src="1p2.png">
      </div>
    </a>
    <a href="#" style="background: url(2.jpg) no-repeat">
      <div class="moveElem img1" rel="0,easeInOutExpo">
        <img src="2p1.png">
      </div>
    </a>
    <a href="#" class="slide3" style="background: url(3.jpg) no-repeat;">
      <div class="moveElem img1" rel="0,easeInOutExpo">
        <img src="3p1.png">
      </div>
      <div class="moveElem img2" rel="150,easeInOutExpo">
        <img src="3p2.png">
      </div>
      <div class="moveElem img3" rel="300,easeInOutExpo">
        <img src="3p3.png">
      </div>
    </a>    
  </div>
  <div class="nav">
    <a class="prev" href="#"></a>
    <a class="next" href="#"></a>
  </div>
</div>

3. Initialize the plugin with custom parameters.

$(".slideInner").slide({
  slideContainer: $('.slideInner a'),
  effect: 'easeOutCirc',
  autoRunTime: 5000,
  slideSpeed: 1000,
  nav: true,
  autoRun: true,
  prevBtn: $('a.prev'),
  nextBtn: $('a.next')
});

4. Default plugin options.

slideContainer: $('.slideInner a'),
effect: 'easeInQuint', 
imgEffectOut: 'easeInExpo', 
autoRunTime: 3000,
slideSpeed: 1000,
imgSlideSpeed: 800,
imgDelay: 50, 
nav: true,
autoRun: true,
prevBtn: $('a.prev'),
nextBtn: $('a.next')

---

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