JSFiddle - React, Tailwind, and code Playground

by shanabus

HTML

<div class="counter"><span id='active'>1</span>/7<br>(the number before the "/" needs to be dynamic, I can get the total)</div>
<div class="image-wrapper">
  <img class="image" src="//via.placeholder.com/350x350" alt="">
  <img class="image" src="//via.placeholder.com/350x350" alt="">
  <img class="image" src="//via.placeholder.com/350x350" alt="">
  <img class="image" src="//via.placeholder.com/350x350" alt="">
  <img class="image" src="//via.placeholder.com/350x350" alt="">
  <img class="image" src="//via.placeholder.com/350x350" alt="">
  <img class="image" src="//via.placeholder.com/350x350" alt="">
</div>

CSS

.counter {
  position: fixed;
  top: 50%;
}

JavaScript

$.fn.isInViewport = function(excludePartials) {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  
  if (excludePartials) {
    var bottomVisible = (elementBottom - viewportTop) / $(this).outerHeight();
    var isInView = elementBottom > viewportTop && elementTop < viewportBottom;
    
    return isInView && bottomVisible > 0.5; // false if its less than 50% visible
  }

  return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).on('resize scroll', function() {
  // new array to store all images in view
  var imagesInView = new Array();
  $('.image').each(function() {    
    // pass in false if partially visible objects should be used
    if ($(this).isInViewport(true)) {       
      var i = $(".image").index( $(this) );
      imagesInView.push(i);
    }
    // get the earliest viewable image:
    $("#active").text( imagesInView[0] + 1 ); 
  });
});