Responsive jQuery Slideshow with Motion Blur Effect

Motion Blur Gallery is a jQuery plugin used to create a responsive image slider/slideshow with a motion blur transition effect using SVG filters.

More features:

• Keyboard, bullets navigation.
• Mouse drag / touch swipe to scroll through your images.
• Greesock TweenMax powered high-performance animations.

See also:

• jQuery & GSAP Based Modal Window with Motion Blur Effect

How to use it:

1. Load the jQuery Motion Blur Gallery's files in your document. Make sure the jquery.motion-blur-gallery.js is loaded after jQuery library but before the closing body tag.

<link rel="stylesheet" href="css/motion-blur-gallery.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/jquery.motion-blur-gallery.js"></script>

2. Load the necessary TweenMax JS library in the document.

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>

3. Insert a list of images with captions into the slideshow.

<div class="motion-blur-gallery">
  <ul>
    <li> <img src="img/1.jpg" alt="img01">
      <p class="text-center">Image Caption 1</p>
    </li>
    <li> <img src="img/2.jpg" alt="img02">
      <p class="text-center">Image Caption 2</p>
    </li>
    <li> <img src="img/3.jpg" alt="img03">
      <p class="text-center">Image Caption 3</p>
    </li>
    <li> <img src="img/4.jpg" alt="img04">
      <p class="text-center">Image Caption 4</p>
    </li>
    <li> <img src="img/5.jpg" alt="img05">
      <p class="text-center">Image Caption 5</p>
    </li>
  </ul>
</div>

4. Initialize the plugin.

$('.motion-blur-gallery').motionBlurGallery({

  // hide the pagination bullets
  hidePagination: true,

  // center the second slide
  initialImageOffset: 1
  
});

---

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