Animated Panning Image Slideshow With jQuery - animatedPanelSlideshow

File Size: 11.1 KB
Views Total: 1987
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Animated Panning Image Slideshow With jQuery - animatedPanelSlideshow

A creative, modern jQuery slideshow plugin which automatically switches between images with a panning animation using jQuery animate() method and jQuery easing plugin.

How to use it:

1. Load the necessary jQuery and jQuery easing plugin into your document.

<script src="" 
<script src=""></script>

2. Load the jQuery timer plugin to handle intervals.

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

3. Create a list of images to be presented in the slideshow.

<ul id="slideshow">
  <li class="box1"><img src="1.jpg"></li>
  <li class="box2"><img src="2.jpg"></li>
  <li class="box3"><img src="3.jpg"></li>
  <li class="box4"><img src="4.jpg"></li>

4. Load the jQuery animatedPanelSlideshow plugin's JavaScript in the document.

<script src="panning-slideshow.js"></script>

5. The example CSS styles for the slideshow.

#slideshow {
  width: 1920px;
  height: 700px;
  overflow: hidden;
  position: relative;

#slideshow li {
  width: 960px;
  height: 350px;
  float: left;
  display: inline;

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