jQuery Plugin To Auto Shuffle Block Elements - ShuffleAuto

ShuffleAuto is a super light jQuery plugin which automatically shuffles a group of block elements (e.g. images, cards, etc.) at a certain speed.

How it works:

• Animates the items to a new location by copying the css properties from the object in the newPositions array with the same index.
• Takes the original responsive inline-blocks and positions them absolutely so the boxes can move to set coordinates.

How to use it:

1. Add a set of block elements to a container with the CSS class of 'scontainer'.

<div class="scontainer">
  <div class="box" id="0"><img src="0.jpg" alt=""></div>
  <div class="box" id="1"><img src="1.jpg" alt=""></div>
  <div class="box" id="2"><img src="2.jpg" alt=""></div>
  <div class="box" id="3"><img src="3.jpg" alt=""></div>
  <div class="box" id="4"><img src="4.jpg" alt=""></div>
  <div class="box" id="5"><img src="5.jpg" alt=""></div>
  <div class="box" id="6"><img src="6.jpg" alt=""></div>
  <div class="box" id="7"><img src="7.jpg" alt=""></div>
</div>

2. Load the jQuery ShuffleAuto plugin's script after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="shuffle.js"></script>

3. That's it. Here're some options to config the shuffle animation.

$('.scontainer').shuffle({
  times: 4,
  durations: [500, 650, 750, 500, 900]
})

---

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