JSFiddle - React, Tailwind, and code Playground

by mkurzweil

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class='p_slider'>
  <div class='p_slider__item front'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch1.png'>
  </div>
  <div class='p_slider__item left'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch2.png'>
  </div>
  <div class='p_slider__item back'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch3.png'>
  </div>
  <div class='p_slider__item right'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch3.png'>
  </div>
</div>
<div class='controls'>
  <div class='left'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrow.png'>
  </div>
  <div class='right'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrow.png'>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: white;
  /* Old browsers */
  background: -moz-linear-gradient(top, white 0%, white 50%, #f4f4f4 51%, #d8d8d8 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(50%, white), color-stop(51%, #f4f4f4), color-stop(100%, #d8d8d8));
}

.p_slider {
  width: 200px;
  height: 339px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.p_slider .left, .p_slider .right {
  cursor: pointer;
  position: absolute;  
}
.p_slider__item {
  position: absolute;
  width: 200px;
  height: 200px;
  cursor: pointer;
  -webkit-transition-duration: 1.5s;
          transition-duration: 1.5s;
  -webkit-transition-property: -webkit-transform,left,opacity,-webkit-filter;
          transition-property: transform,left,opacity,-webkit-filter;
}
.p_slider__item img {
  width: 200px;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  position: relative;
  -webkit-animation: scale_bounce 1.2s .4s forwards;
          animation: scale_bounce 1.2s .4s forwards;
  -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255, 255, 255, 0.2)));
}
.back
{
	-webkit-transform: scale(0.4);
     -ms-transform: scale(0.4);
        transform: scale(0.4);
	1visibility:hidden;
	left:0px;	
	z-index: 1;
	-webkit-filter: blur(2px);
}
.front
{
	-webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
      left: 0px;
      z-index: 3;
}
.left
{
	-webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
	left: -200px;  
    opacity: 0.8;
    z-index: 2;
	-webkit-filter: blur(2px);
}
.right
{
	  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
      left: 200px;
      z-index: 2;
      -webkit-filter: blur(2px);
 ...

JavaScript

// 3D Slider for Reece


on = 0;  // Init
time = 500; // Set the delay before the next click is accepted to 1 second

// Right
$('.right').click(function () {
    rotateRight(); // Call
    on = 1; // Set delay on
});

// Left
$('.left').click(function () {
    rotateLeft(); // Call
    on = 1; // Set delay on
});

play = setInterval(function () {
    rotateLeft()            
}, 3000)

// Rotate left
function rotateLeft() {
    if (on == 0) {
        var frontElem = $('.p_slider__item.front');
        var leftElem = $('.p_slider__item.left');
        var backElem = $('.p_slider__item.back');
        var rightElem = $('.p_slider__item.right');

        frontElem.removeClass('front').addClass('left');
        leftElem.removeClass('left').addClass('back');
        backElem.removeClass('back').addClass('right');
        rightElem.removeClass('right').addClass('front');

        setTimeout(function () {
            on = 0; // Accept clicks again
        }, time)
    }
}

// Rotate right
function rotateRight() {
    if (on == 0) {
        var frontElem = $('.p_slider__item.front');
        var leftElem = $('.p_slider__item.left');
        var backElem = $('.p_slider__item.back');
        var rightElem = $('.p_slider__item.right');

        frontElem.removeClass('front').addClass('right');
        leftElem.removeClass('left').addClass('front');
        backElem.removeClass('back').addClass('left');
        rightElem.removeClass('right').addClass('back');

        setTimeout(function () {
            on = 0; // Accept clicks again
        }, time)
    }
}

$('.p_slider__item img').hover(function () {
    clearInterval(play)
})
$('.p_slider__item img').mouseenter(function () {
    $(this).animate({ 'top': '-14px' }, 300);
})
$('.p_slider__item img').mouseout(function () {
    $(this).stop(true, false).animate({ 'top': '0px' }, 300)
    play = setInterval(function () {
        rotateLeft()
    }, 3000)
})