jQuery Image Carousel Plugin with Advanced Animations - pocketHorse

pocketHorse is a jQuery plugin for making an automatic image carousel slider with 6 built-in advanced transition effects based on CSS3 and jQuery animate() method.

Features:

• jQuery animate() based 'push' and 'slide' animations.
• CSS/CSS3 based 'adv-scaleRotate', 'adv-scale' and 'transparency' animations.
• Dots pagination and arrows navigation.

Basic usage:

1. Load jQuery library and the jQuery pocketHorse plugin's files in the web page.

<link rel="stylesheet" href="pocketHorse.css">
<script src="jquery-1.11.3.js"></script>
<script src="pocketHorse.js"></script>

2. Load the jQuery easing plugin for more easing methods (OPTIONAL).

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

3. Load the jQuery fragmentFly plugin for Fragment Fly animations(OPTIONAL).

<script src="jquery.fragmentFly.js"></script>

4. Add the initial image with next / prev navigation into the carousel slider.

<div class="image-carousel">
  <a class="carousLeftArr pa"><i class="iconB iconLeft"></i></a>
  <div class="imageArea">
    <img src="1.jpg">
    <img>
  </div>
  <a class="carousRightArr pa"><i class="iconB iconRight"></i></a>
</div>

5. Initialize the image carousel slider.

$('.image-carousel').pocketHorse({

  // dots pagination
  dotControl : true ,

  // arrows navigation
  blockControl : true ,

  // auto hide navigation / pagination
  isControlerHide : true ,

  // transition delay
  stayTime : 3000 ,

  // transition speed
  transTime : 1500 ,

  //left,right,up,down//mult
  transDirection : 'right' , 

  // slide, push, transparency, adv-scale, adv-scaleRotate, adv-fragmentFly
  transFunction : 'adv-scaleRotate' , 

  // easing effects
  transEasying : 'easeOutExpo'

}

---

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