Responsive Auto Swapping Photo Wall Plugin With jQuery - SwappingWall

SwappingWall is a simple fast jQuery plugin used for generating a responsive photo wall that automatically and randomly swaps images at a certain speed.

How to use it:

1. Create an image list for the photo wall.

<div class="list">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  ...
</div>

2. Load the JavaScript file swappingwall.jquery.js after jQuery library.

<script src="//code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="js/swappingwall.jquery.js"></script>

3. Apply you own CSS styles to the photo wall.

.list {
  width: 100%;
  padding: 0;
  margin: 0;
}

.list img { float: left; }

@media screen and (max-width:991px) {
  .list div { width: 33.333333%; }
}

@media screen and (max-width:768px) {
  .list div { width: 50%; }
}

4. Call the function on the image list to generate a basic photo wall.

$('.list').SwappingWall()

5. Set the delay & duration of the swap animation.

$('.list').SwappingWall({
  'time': 2000,
  'duration': 400
})

6. Specify how many images displayed per row.

$('.list').SwappingWall({
  'itemsInRow': 8
})

7. Config the photo wall on different screens.

$('.list').SwappingWall({
  'responsive': [
    {
      'breakpoint': 991,
      'itemsInRow': 3,
    },
    {
      'breakpoint': 768,
      'itemsInRow': 2,
    }
  ]
})

Change log:

2017-03-27

• Bugfixed

---

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