Images rotation jQuery plugin demo page

Github: https://github.com/sladex/images-rotation

Demo

Put cursor over the image:

As a css background-image property (with background-size: contain and cover):

Code

  <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>