JSFiddle - React, Tailwind, and code Playground

by deathhell

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="contain">
  <div class="circle circle1 circle_btn" data-dir="prev"><img class="cover_fit" src="https://uniform.wingzero.tw/assets/images/clothes_v1.png" alt=""></div>
  <div class="circle circle2 circle_btn" data-dir="next"><img class="cover_fit" src="https://uniform.wingzero.tw/assets/images/clothes_v3.png" alt=""></div>
  <div class="circle circle_b"></div>
  <div class="img_center">
    <img src="https://uniform.wingzero.tw/assets/images/clothes_v1.png" alt="">
    <img class="active" src="https://uniform.wingzero.tw/assets/images/clothes_v2.png" alt="">
    <img src="https://uniform.wingzero.tw/assets/images/clothes_v3.png" alt="">
    <img src="https://uniform.wingzero.tw/assets/images/clothes_v4.png" alt="">
  </div>
  
</div>

CSS

body{
  margin:0;
  padding:0;
}
.contain{
  height:100vh;
  position:relative;
}
.circle{
  border-radius:50%;
  position:absolute;
  width:96px;
  height:96px;
}
.circle_b{
  width:300px;
  height:300px;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  background: #aaa;
}
.circle1{
  left:10px;
  top:10px;
  background: lightblue;
}
.circle2{
  right:10px;
  bottom:10px;
  background: lightblue;
}
.cover_fit{
  width:100%;
  height:100%;
  object-fit:cover;
}
.img_center img{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, 40%);
  opacity:0;
  transition: all .5s;
}
.img_center img.active{
  transform: translate(-50%, -50%);
  opacity:1;
}

JavaScript

var imgArr=["https://uniform.wingzero.tw/assets/images/clothes_v1.png", "https://uniform.wingzero.tw/assets/images/clothes_v2.png", "https://uniform.wingzero.tw/assets/images/clothes_v3.png", "https://uniform.wingzero.tw/assets/images/clothes_v4.png"];
var arrLength=imgArr.length;
var lmgLast=arrLength-1;
var nowPic=1;

$(".circle_btn").click(function(){
	var dir=$(this).data("dir");
  if(dir=="next"){
  	var out = imgArr.splice(0, 1);
    imgArr.push(out);
    nowPic=(nowPic+1)%arrLength;
  }else{
  	var out = imgArr.splice(lmgLast, 1);
    imgArr.unshift(out);
    nowPic=(nowPic-1)%arrLength;
  }
  
  $(".circle1 img").attr("src", imgArr[0]);
  $(".circle2 img").attr("src", imgArr[2]);
  
  $(".img_center img").removeClass();
  
  $(".img_center img").eq(nowPic).addClass("active");
  
});