JSFiddle - React, Tailwind, and code Playground

by Yunus Gaziev

HTML

<div class="image-rotator">
  <div class="image-rotator__holder">
    <img id="rotImg1" class="preload-rotator preload__image" src="https://divanchik.ru/upload/resize_cache/iblock/90f/1100_1100_1d7a58ff99b324185ccb5ad5dfbdb5e85/90fd6b3339fa0868371b06a9b931ad4a.png" srcset="https://divanchik.ru/upload/resize_cache/iblock/90f/1100_1100_1d7a58ff99b324185ccb5ad5dfbdb5e85/90fd6b3339fa0868371b06a9b931ad4a.png 1x, https://divanchik.ru/upload/iblock/90f/90fd6b3339fa0868371b06a9b931ad4a.png 2x" alt="" data-value="661_18301">
    <img id="rotImg2" class="preload-rotator preload__image" src="https://divanchik.ru/upload/resize_cache/iblock/b5f/1100_1100_1d7a58ff99b324185ccb5ad5dfbdb5e85/b5f5940b9fa04b2c55950c339e9d0fac.png" srcset="https://divanchik.ru/upload/resize_cache/iblock/b5f/1100_1100_1d7a58ff99b324185ccb5ad5dfbdb5e85/b5f5940b9fa04b2c55950c339e9d0fac.png 1x, https://divanchik.ru/upload/iblock/b5f/b5f5940b9fa04b2c55950c339e9d0fac.png 2x" alt="" data-value="661_18302">
    <img id="rotImg3" class="preload-rotator preload__image" src="https://divanchik.ru/upload/resize_cache/iblock/0eb/1100_1100_1d7a58ff99b324185ccb5ad5dfbdb5e85/0eb657974673b127da5ca0aeb852aef5.png" srcset="https://divanchik.ru/upload/resize_cache/iblock/0eb/1100_1100_1d7a58ff99b324185ccb5ad5dfbdb5e85/0eb657974673b127da5ca0aeb852aef5.png 1x, https://divanchik.ru/upload/iblock/0eb/0eb657974673b127da5ca0aeb852aef5.png 2x" alt="" data-value="661_18303">
    <img id="rotImg4" class="preload-rotator preload__image" src="https://divanchik.ru/upload/resize_cache/iblock/07c/1100_1100_1d7a58ff99b324185ccb5ad5dfbdb5e85/07c577785869797cdb5b3ce5edce6351.png" srcset="https://divanchik.ru/upload/resize_cache/iblock/07c/1100_1100_1d7a58ff99b324185ccb5ad5dfbdb5e85/07c577785869797cdb5b3ce5edce6351.png 1x, https://divanchik.ru/upload/iblock/07c/07c577785869797cdb5b3ce5edce6351.png 2x" alt="" data-value="661_18304">
    <img id="rotImg5" class="preload-rotator preload__image"...

CSS

* {
  box-sizing: border-box;
}

.image-rotator {
  position: relative;
  width: 100%;
}

.image-rotator__holder {
  position: relative;
  height: 420px;
  overflow: hidden;
  z-index: 5;
}

.image-rotator img {
  position: relative;
  margin-top: -100px;
  width: 100%;
  height: auto;
  vertical-align: top;
  opacity: 0;
}

.image-rotator img._active {
  opacity: 1;
}

.image-rotator img:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}

.ctrl {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow-x: scroll;
  /* opacity: 0; */
  transform: scale(-1);
}

.ctrl__button {
  width: 200%;
  height: 100%;
}

JavaScript

let images = $('.image-rotator img');
let images_length = images.length

let ctrl = $('.ctrl');
let ctrl_width = ctrl.outerWidth();

let range_positive = $('#range_positive');
let range_negative = $('#range_negative');

let active_idx = Math.floor(images_length / 2);
let active_percent = active_idx / (images_length / 100);
let scroll_start = (ctrl_width / 100) * active_percent;


function move_scroll(percent) {
	ctrl.scrollLeft(ctrl_width / 100 * percent);
}


ctrl.on('scroll', function() {
	let percent = ctrl[0].scrollLeft / (ctrl_width / 100);
  let img_index = Math.floor(images_length / 100 * percent);
  images.eq(img_index).addClass('_active').siblings().removeClass('_active');
  
  range_positive[0].value = percent;
  range_negative[0].value = 100 - percent;
});


range_positive.on('input', function() {
	move_scroll( this.value );
});


range_negative.on('input', function() {
	move_scroll( 100 - this.value );
});


ctrl.scrollLeft(scroll_start);