JSFiddle - React, Tailwind, and code Playground

by vovcat

HTML

<div class="g"></div>
<div class="pan">
  <div style="background:#363"></div>
  <div style="background:#565"></div>
  <div style="background:#767"></div>
  <div style="background:#969"></div>
  <div style="background:#b6b"></div>
  <div style="background:#d6d"></div>
  <div style="background:#f6f"></div>
  <div style="background:#f8f"></div>
  <div style="background:#faf"></div>
</div>
<button class="prev">Prev</button>
<button class="next">Next</button>

SCSS

.g {
   position: absolute;
   width: 40px;
   height: 30px;
   border:1px solid #fff;
   top:5px;
   left:50%;
   margin:10px 0 0 -20px;
   z-index:2;
}
.pan {
  position: relative;
  margin: 10px auto;
  perspective: 200px;
  perspective-origin: center 150px;
  border: 1px solid #555;
  width: 600px;
  height: 200px;
  Xoverflow: hidden;
}

.pan:after {
  content: "";
  display: table;
  clear: both;
}
x.pan:hover {
  transform: rotate(-13.6deg);
  transform-origin: 50% 300px;
  transform-style: preserve-3d;
  transition: transform .1s;
}

.pan div {
  position: absolute;
  width: 40px;
  height: 30px;
  left: 50%; top:15px;
  margin:20px 0 0 -20px;
  transform-origin: 20px 300px;
  transform-style: preserve-3d;
  transition: transform .4s;
}

@for $i from 1 through 9 {
  .pan div:nth-child(#{$i}) {
    transform: rotate(#{ ($i - 5) * 10}deg) rotateX(-10deg);
  }
}
@for $i from 1 through 9 {
  .pan:hover div:nth-child(#{$i}) {
    transform: rotate(#{ ($i - 6) * 10}deg) rotateX(-10deg);
  }
}

JavaScript

var slider = window.slider = new function () {
	this.interval = 3000;
  this.tmid = null;
	var self = this;
  this.next = function () {
  	$('.pan :first').remove().appendTo($('.pan'));
  };
  this.prev = function () {
  	$('.pan :last').remove().prependTo($('.pan'));
  };
  this.hold = function () {
  	if (self.tmid) {
    	clearTimeout(self.tmid);
    	self.tmid = null;
    }
  };
  this.unhold = function () {
  	if (!self.tmid) {
    	self.tmid = setTimeout(function () {
      	self.next();
        self.hold();
        self.unhold();
      }, self.interval);
    }
  };
  $('.prev').on('click', this.prev);
  $('.next').on('click', this.next);
  $('.prev, .next').on('mouseenter', this.hold);
  $('.prev, .next').on('mouseleave', this.unhold);
  this.unhold();
};