JSFiddle - React, Tailwind, and code Playground

by gavinfoley

HTML

<div class="thumbscrubber smooth" style="width:200px; height:200px;">
    <span class="ts-inner">
        <img src="http://lorempixel.com/200/200/people/1" class="ts-currslide"  />
        <img src="http://lorempixel.com/200/200/people/2" />
        <img src="http://lorempixel.com/200/200/people/3" />
        <img src="http://lorempixel.com/200/200/people/4" />
        <img src="http://lorempixel.com/200/200/people/5" />
        <img src="http://lorempixel.com/200/200/people/7" />
        <img src="http://lorempixel.com/200/200/people/8" />
        <img src="http://lorempixel.com/200/200/people/9" />
        <img src="http://lorempixel.com/200/200/people/10" />
    </span>
</div>

CSS

.thumbscrubber {
    position: relative;
    display: block;
}
.thumbscrubber .ts-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.thumbscrubber .ts-inner > * {
    display:block;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.thumbscrubber .ts-inner .ts-currslide {
    opacity: 1;
}

.thumbscrubber.smooth .ts-inner > * {
    transition: all .3s ease;
}

JavaScript

var ts_prevslide, ts_currslide;

  $(document).on('mousemove mouseleave','.thumbscrubber',function(e){

  	var $this = $(this);
    var width = $(this).innerWidth();

    var $slides = $('.ts-inner',this).children();
    var numslides = $slides.length;

    if(e.type == 'mousemove'){
    	x = e.pageX - $(this).offset().left;
    	ts_currslide = Math.floor(x / (width / numslides)) + 1;

    	if(ts_currslide != ts_prevslide){
    	  ts_prevslide = ts_currslide;
      	  $('.ts-inner > .ts-currslide',this).removeClass('ts-currslide');
      	  $('.ts-inner > :nth-child('+ts_currslide+')',this).addClass('ts-currslide');
    	}
    	return false;
    }
    else if(e.type == 'mouseleave'){
      if(ts_currslide != 1){
        ts_currslide = 1;
        ts_prevslide = 1;
        $('.ts-inner > .ts-currslide',this).removeClass('ts-currslide');
        $('.ts-inner > :nth-child('+ts_currslide+')',this).addClass('ts-currslide');
      }
      return false;
    }
  });