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="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></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>
</ul>

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.