Swap Images On Cursor Move - jQuery Swinger

Swinger is a small and simple-to-use jQuery plugin that switches between a group of overlapping images that follows mouse movement while hovering over them.

Particularly suitable for creating a product viewer that enables the customers to view your product image from different angles.

How to use it:

1. Insert a group of product images to the Swinger container.

<div class="swinger-container">
  <img src="img/1.jpg" />
  <img src="img/2.jpg" />
  <img src="img/3.jpg" />
  <img src="img/4.jpg" />
  <img src="img/5.jpg" />
  <img src="img/6.jpg" />
  <img src="img/7.jpg" />
  ...
</div>

2. Download and insert the swinger.js after jQuery (slim build).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="swinger.js"></script>

3. Initialize the plugin by call the function on the Swinger container. Done.

$(function(){

  $(".swinger-container").swinger();

});

---

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