JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="image active" style='background-image: url(http://juliandance.org/wp-content/uploads/2016/01/RedApple.jpg);'></div>
<div class="image" style='background-image: url(https://www.wired.com/wp-content/uploads/2014/07/brain1.jpg);'></div>
<div class="image" style='background-image: url(http://myrmecos.net/wp-content/uploads/2010/07/formica.jpg);'></div>

CSS

body {
  background-color: white;
}

.image {
  display: none;
  width: 300px;
  height: 300px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.image.active {
  display: block;
}

JavaScript

var deltaX = 0;
var deltaY = 0;
var step = 90;
var $img = $('.image');

$img.on('click', function(e) {
  $(this).index() < $img.length - 1
  	? $img.removeClass('active').filter(this).next().addClass('active')
		: $img.removeClass('active').first().addClass('active');
});

$('.image').on('mousemove', function(e) {
  if (e.pageX >= deltaX || e.pageY >= deltaY) {
    $(this).trigger('click');

    deltaX = e.pageX + step;
    deltaY = e.pageY + step;
  } else if (e.pageX <= deltaX - step * 2 || e.pageY <= deltaY - step * 2) {
    deltaX = e.pageX + step;
    deltaY = e.pageY + step;

    $(this).trigger('click');
  }
});