Github: https://github.com/sladex/images-rotation
Put cursor over the image:
As a css background-image property (with background-size: contain and cover):
<div class="images-rotation" data-images='["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"]'> <img src="img/1.jpg" alt=""> </div> <div class="images-rotation" data-images='["img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg"]'> <img src="img/5.jpg" alt=""> </div> <div class="images-rotation" data-images='["img/9.jpg", "img/10.jpg", "img/11.jpg", "img/12.jpg"]'> <img src="img/9.jpg" alt=""> </div> <div class="images-rotation" data-images='["img/13.jpg", "img/14.jpg", "img/15.jpg", "img/16.jpg"]'> <img src="img/13.jpg" alt=""> </div> <div class="images-rotation-bg" data-images='["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"]'> <div class="images-rotation-bg-img1" style="background-image: url(img/1.jpg)"></div> </div> <div class="images-rotation-bg" data-images='["img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg"]'> <div class="images-rotation-bg-img2" style="background-image: url(img/5.jpg)"></div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.images-rotation.min.js"></script> <script> $('.images-rotation').imagesRotation(); $('.images-rotation-bg').imagesRotation({ imgSelector: 'div' }); </script>