JSFiddle - React, Tailwind, and code Playground

by mo nagano

HTML

<div class="slideBox">
            <ul class="slideCommon left">
                <li class="item">
                    スライド１
                </li>
                <li class="item">
                    スライド２
                </li>
                <li class="item">
                    スライド３
                </li>
            </ul>
            <ul class="slideCommon center">
                <li class="item">
                    スライド１
                </li>
                <li class="item">
                    スライド２
                </li>
                <li class="item">
                    スライド３
                </li>
            </ul>
            <ul class="slideCommon right">
                <li class="item">
                    スライド１
                </li>
                <li class="item">
                    スライド２
                </li>
                <li class="item">
                    スライド３
                </li>
            </ul>
        </div>

CSS

* {
  padding: 0;
  margin: 0; }
.slideBox{
  overflow-x:hidden;
  overflow-y:visible;
  width:1600px;
  height:200px;
}
li {
  list-style: none; }

.slideCommon {
  position: relative; }

.item {
  position: absolute;
  top: 50px;
  opacity: 0;
}

.item.show {
  opacity: 1; }

.left .item {
  background-color: red;
  width: 700px;
  height:350px;
  left: 0px; }

.center .item {
  background-color: orange;
  width: 900px;
  height:400px;
  top: 0;
  left: 50%;
  margin-left: -450px;
  z-index: 3; }

.right .item {
  background-color: blue;
  width: 700px;
  height:350px;
  right: 0px; }

JavaScript

$( function() {
    $( ".slideCommon" ).each( function(i) {
        var slideImg = $( this ).find( ".item" );
        var num = slideImg.length;
        var current = i;
        var isCenter = $( this ).hasClass('center');
        slideImg.eq( current ).addClass( "show" );
        var slideAction = function() {
            var currentSlide = slideImg.eq( current );
            currentSlide.animate({ left:isCenter ?"-=3000":"+=2000"},500,function(){
            	$(this).removeClass( "show" );
              $(this).css('left',isCenter ?"+=3000":"-=2000");
              current++;
              if ( current >= num ) {
                  current = 0;
              }
            	var nextSlide = slideImg.eq( current );
              nextSlide.css('left',isCenter ?"+=3000":"-=2000");
              nextSlide.addClass( "show" );
              nextSlide.animate({ left:isCenter ?"-=3000":"+=2000"},500, function(){
                setTimeout(slideAction,2000);
              });
              
        }); 
        };
        slideAction();
    } );
} );