How to realize seamless rotation map? Write it again with native JS

Use native js Realize seamless rotation map
Realization effect ：

index.js：

var config = {
    
	imgWidth:380,// Picture size 
	dotWidth:8,// Small dot size 
	doms:{
    
		divImgs:document.querySelector('.imgs'),
		divDots:document.querySelector('.circle'),
		divDirection:document.querySelector('.direction'),
		divContainer:document.querySelector('.container')
	},
	curIndex:0,// Actual image index ,0 ~ imgNumber-1
	timer:{
    
		duration:16,// Exercise interval 
		total:1000,// Total time 
		id:null// Timer number 
	}
}
// Number of pictures 
config.imgNumber = config.doms.divImgs.children.length;
// Initialize element size 
config.imgsWidth = (config.imgNumber + 2)*config.imgWidth;
config.dotsWidth = (config.imgNumber + 2)*config.dotWidth;

// initialization 
function inti(){
    
	intiWidth();
	intiCount();
	intiElement();
	intiPosition();
	function intiWidth(){
    
		config.doms.divImgs.style.width = config.imgsWidth + 'px';
        config.doms.divDots.style.width = config.dotsWidth + 'px';
	}
	function intiCount(){
    
		for(var i = 0; i < config.imgNumber; i ++){
    
			var p = document.createElement('p');
			config.doms.divDots.appendChild(p);
		}
	}
	function intiElement(){
    
	     var first = config.doms.divImgs.children[0],last = config.doms.divImgs.children[config.imgNumber-1];
	     var newImg = first.cloneNode(true);// Deep cloning 
	     config.doms.divImgs.appendChild(newImg);
	     newImg = last.cloneNode(true);
	     config.doms.divImgs.insertBefore(newImg,first);
	}
	function intiPosition(){
    
		var left = (-config.curIndex-1)*config.imgWidth;
        config.doms.divImgs.style.marginLeft  = left + 'px';
        setDots();// The position setting of the activation state of the small round dot 
	}
}
inti();

// The position setting of the activation state of the small round dot 
function setDots(){
    
	for(var i = 0; i < config.doms.divDots.children.length; i++){
    
    	var dot = config.doms.divDots.children[i];
    	if(i === config.curIndex){
    
    		dot.className = 'select';
    	}else{
    
    		dot.className = '';
    	}
    }
}

/*  Picture switching  index:  Picture index  directions:  Picture switching direction （left,right） */
function switchTo(index,directions){
    
	if(index === config.curIndex){
    
		return;
	}
	if(!directions){
    
		directions = 'right';// Switch the picture to the right by default 
	}

	// The final display picture ;  Picture container marginLeft
	var newLeft = (-index-1)*config.imgWidth;
	animateSwitch();
	//config.doms.divImgs.style.marginLeft = newLeft + 'px';
    
    // The position setting of the activation state of the small round dot 
    config.curIndex = index;
    setDots();

    // The total number of movements of a picture 
    var number = Math.ceil(config.timer.total/config.timer.duration);
    // Current number of movements 
    var curNumber = 0;
    
    var distance,// Total movement distance 
        totalWidth = config.imgNumber*config.imgWidth,
        marginLeft = parseFloat(getComputedStyle(config.doms.divImgs).marginLeft);
    if(directions === 'left'){
    
    	if(newLeft < marginLeft){
    
    		distance = newLeft - marginLeft;
    	}else{
    
    		distance = -(totalWidth-Math.abs(newLeft - marginLeft));
    	}
    }
    if(directions === 'right'){
    
    	if(newLeft > marginLeft){
    
    		distance = newLeft - marginLeft;
    	}else{
    
    		distance = totalWidth-Math.abs(newLeft - marginLeft);
    	}
    } 

    // The distance of each change 
    var everDistence = distance/number;   

    // Gradually change marginLeft
    function animateSwitch(){
    
    	clearAnimate();
    	config.timer.id = setInterval(function(){
    

    		marginLeft += everDistence;
    		if(directions === 'left' && Math.abs(marginLeft) > totalWidth){
    
    			marginLeft += totalWidth;
    		}
    		else if(directions === 'right' && Math.abs(marginLeft) < config.imgWidth){
    
    			marginLeft -= totalWidth;
    		}
    		config.doms.divImgs.style.marginLeft = marginLeft + 'px';

    		curNumber ++;
    		if(curNumber === number){
    
    			clearAnimate();
    		}
    	},config.timer.duration);
    }

    // Clear timer 
    function clearAnimate(){
    
    	clearInterval(config.timer.id);
    	config.timer.id = null;
    }
}

// Automatically rotate pictures to the right by default 
var timer = setInterval(function(){
    
	toRight();
},2000);
config.doms.divContainer.onmouseleave = function() {
    
	timer = setInterval(function(){
    
	    toRight();
    },2000);
}
// When the mouse is moved out, the timer will be cleared 
config.doms.divContainer.onmouseover = function() {
    
	clearInterval(timer);
}

// Left and right click events 
config.doms.divDirection.onclick = function(e){
    
	clearInterval(timer);
	if(e.target.classList.contains('left')){
    
		toLeft();
	}
	if(e.target.classList.contains('right')){
    
		toRight();
	}
}

function toLeft(){
    
	var index = config.curIndex - 1;
	if(index < 0){
    
		index = config.imgNumber - 1;
	}
    switchTo(index,'right');
}
function toRight(){
    
	var index = config.curIndex + 1;
	if(index > config.imgNumber - 1){
    
		index = 0;
	}
	switchTo(index,'left');
}

// Dot click event 
config.doms.divDots.onclick = function(e){
    
	if(e.target.tagName === 'P'){
    
		var index = Array.from(this.children).indexOf(e.target);
		switchTo(index,index > config.curIndex? 'left' : 'right')
	}
}

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Seamless carousel </title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<div class="container">
		<div class="imgs">
			<img class="item" src="../imagejpg/1.jpg" alt="">
			<img class="item" src="../imagejpg/2.jpg" alt="">
			<img class="item" src="../imagejpg/3.jpg" alt="">
		</div>
		<div class="circle">
			<!-- <p></p>
			<p class="select"></p>
			<p></p>
			<p></p>
			<p></p> -->
		</div>
		<div class="direction">
			<div class="item left">&lt;</div>
			<div class="item right">&gt;</div>
		</div>
	</div>
	<script src="./index.js">
		
	</script>
</body>
</html>

index.css：

.container{
    
	width:380px;
	height:250px;
	border:1px solid;
	margin:0 auto;
	position:relative;
	overflow: hidden;
}
.container .imgs{
    
    
}
.container .imgs .item{
    
	width:380px;
	height:250px;
	display:block;
	float:left;
	top:0;
}
.container .circle{
    
	position:absolute;
	left:0;
	right:0;
	margin:0 auto;
	background:rgba(0,0,0,.3);
	bottom:8px;
	border-radius:5px;
}
.container .circle p{
    
	width:8px;
	height:8px;
	background:#fff;
	border-radius:50%;
	float:left;
	margin:2px;
	cursor:pointer;
}
.container .circle p.select{
    
	background:#f40;
}
.container .direction .item{
    
    background:rgba(0,0,0,.4);
	position:absolute;
    top:120px;
    width:20px;
    height:26px;
    padding:2px;
    box-sizing:border-box;
    display:none;
    cursor:pointer;
}
.container .direction .item:hover{
    
    background:rgba(0,0,0,.5);
}
.container:hover .direction .item{
    
    display:block;
}
.container .direction .left{
    
	left:0;
	border-radius:0 15px 15px 0;
}
.container .direction .right{
    
	right:0;
	padding-left:6px;
	border-radius:15px 0 0 15px;
}