JSFiddle - React, Tailwind, and code Playground

by dont27

HTML

<script src="//cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
<div id="app">
  <slider :pics='imgs'></slider>
</div>
<script type="text/x-template" id="slider">
  <div class="slider" @mouseover="clearTime()" @mouseout="setTime()">
    <div class="imgs"  :style="{left:-left+'px', width:600*(pics.length*2)+'px'}" :class="{transition:trans}">
    	<div class="item" v-for="item in pics">
      	<span>{{item.desc}}</span>
      </div>
      <div class="item" v-for="item in pics">
      	<span>{{item.desc}}</span>
      </div>
    </div>
    <div class="dots">
    	<span class="dot" v-for="(item, index) in pics" @click="tab(index)" :class="{active:index==currentIndex||(index==currentIndex-pics.length)}"></span>
    </div>
  </div>
</script>

CSS

.slider{
  position:relative;
  width:600px;
  overflow:hidden;
}
.imgs{
  position:relative;
  top:0;
  left:0;
  
}
.transition{
   transition: left .5s ease;
}
.imgs .item{
  width:600px;
  height:200px;
  float:left;
  background-color:blue;
  text-align:center;
}
.item span{
  font-size:50px;
  color:yellow;
}
.dots{
  position:absolute;
  margin-left:50%;
  transform:translate(-50%,0);
  bottom:10px;
}
.dot{
  width:4px;
  height:4px;
  display:inline-block;
  background-color:white;
  margin:2px;
}
.dot.active{
  background-color:red;
}

JavaScript

Vue.component('slider',{
  	template:'#slider',
    props:['pics'],
    data:function(){
    	return {
        currentIndex:0,
        timer:null,
        trans:true
      }
    },
		created:function(){
    	this.setTime();
    },
    computed:{
    	left:function(){
      	return this.currentIndex * 600
      }
    },
    methods:{
    	clearTime:function(){
      	if(this.timer){
        	clearInterval(this.timer);
        }
      },
    	setTime:function(){
      	if(this.timer){
        	clearInterval(this.timer);
        }
        var that = this;
        this.timer = setInterval(function(){
        	if(that.currentIndex<that.pics.length){
          	that.trans = true;
          	that.currentIndex++;
            if(that.currentIndex==that.pics.length)
            setTimeout(function(){
            	 that.trans = false;
           		 that.currentIndex = 0;
            },800)
            
          }else{
          	that.currentIndex = 0;
          }
        },2000);
      },
    	tab:function(index){
      	var that = this;
        that.trans = true;
     		if(index<this.currentIndex){
        	this.currentIndex = index + this.pics.length;
          setTimeout(function(){
          	that.currentIndex = index;
            that.trans = false;
            that.setTime();
          },800);
        }else{
       		this.currentIndex = index;
          this.setTime();
        }
        
      }
    }
  })
  new Vue({
  	el:'#app',
    data:{
    	imgs:[
      	{desc:1},
        {desc:2},
        {desc:3},
        {desc:4},
        {desc:5}
      ]
    }
  })