Зацикливание изображений при просмотре мобильного javascript в области просмотра

Проблема

Я пытаюсь создать карточку продукта, которая перебирает изображения при наведении мыши (для рабочего стола) и когда div за пределами изображения полностью находится внутри области просмотра на мобильном устройстве. Также, когда мышь больше не зависает, цикл останавливается, или когда карта находится вне области просмотра (мобильной), цикл останавливается.

Что я сделал

Я выполнил часть для настольных устройств, но не могу понять, как это сделать для мобильных устройств...

Вот мой код

HTML+PHP

<?php for ($i=1; $i < $variable_number ; $i++) { ?>
<div class = "card-image waves-effect waves-block waves-light">
                <img id = "<?php echo $i; ?>" style = "background-image: cover;" src = "/images/shop1.jpg" data-alt-src = "/images/shop2.jpg;/images/trip1.jpg;/images/trip2.jpg" class = "img-loop activator">
                <div style = "margin:0;" class = "progress white">
                  <div id = "load<?php echo $i; ?>" class = "determinate black" style = "width: 0%"></div>
                </div>
              </div>
<?php
          }
         } ?>

CSS

Я использую MaterializeCSS фреймворк

Javascript

var alt_src, elem, i, timeout, moving, width=0, loop_interval=2000, loader_num;

$('img.img-loop')
.mouseenter(function() {
  $(this).data('old-src', this.src);
  elem = this;
  alt_src = $(this).data('alt-src').split(';');
  i = 0;
  loader_num = this.id;
  moving = setInterval(move, (alt_src.length+1)*(loop_interval/100));
  timeout = setTimeout(loop, loop_interval);
})
.mouseout(function() {
  clearTimeout(timeout);
  clearInterval(moving);
  width = 0;
  var elem = document.getElementById("load"+loader_num);
  elem.style.width = width + '%';
  this.src = $(this).data('old-src');
});

function loop() {
if (i === alt_src.length) {
  elem.src = $(elem).data('old-src');
  i = 0;
} else {
  elem.src = alt_src[i++];
}
timeout = setTimeout(loop, loop_interval);
}

function move() {
  var elem = document.getElementById("load"+loader_num);
    if (width == 100) {
      width = 0;
    } else {
      width++;
      elem.style.width = width + '%';
    }
}

Выводы

Что я могу сделать сейчас, чтобы достичь эффекта? Я стремлюсь к чему-то вроде этого Вот скрипт того, что я уже сделал: https://jsfiddle.net/iacopoermacora/Lytj02za/1/