Shuffle Images With Fade In/Out Animations - jQuery serialshuffle

serialshuffle is a tiny jQuery plugin to randomly shuffle images in a grid with fading in/out animation effects.

It supports any number of columns (6, 9, 12, etc.), making it a fun way to display brand logos or image-intensive mockups for clients.

Useful for adding a little extra bit of pizzazz to your web design presentations or simply showing off your work in a unique way!

How to use it:

1. Add jQuery library together with the serialshuffle plugin's files to the page.

<link rel="stylesheet" href="/path/to/dist/jquery.serialshuffle.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.serialshuffle.min.js"></script>

2. Create a list of logos on the page.

<ul class="js-serialshuffle">
  <li><img src="1.svg" alt=""></li>
  <li><img src="2.svg" alt=""></li>
  <li><img src="3.svg" alt=""></li>
  <li><img src="4.svg" alt=""></li>
  <li><img src="5.svg" alt=""></li>
  ... more logo here ...
</ul>

3. Initialize the plugin and load more logos from the folder you specify.

$('.js-serialshuffle').serialshuffle({
  folder: './logos/',
  shuffle: [
    '6.svg',
    '7.svg',
    '8.svg',
    '9.svg',
    '10.svg',
    // ... more logos here ...
  ]
});

4. Set the delay for fading in and out of two images. Default: 2000ms.

$('.js-serialshuffle').serialshuffle({
  folder: './logos/',
  shuffle: [
    '6.svg',
    '7.svg',
    '8.svg',
    '9.svg',
    '10.svg',
    // ... more logos here ...
  ],
  speed: 1000,
});

---

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