带图像预览导航的Div Carrousel

Question

因此，我正在尝试通过添加CSS样式来开发Javascript Carrousel。我有以下代码，但是在导航中，我缺少一些将预览与实际项目同步的功能。

因此，我试图开发我需要做的，就是单击.preview-item =>转到相同的滑块项目编号。

当有人单击“下一步”或“上一步”按钮时，请重新启动slideInterval，因为它会继续运行，您可以错误地跳过其中一个。

此外，我该如何识别：

如果是下一个位置>从右侧滑动

如果是以前的位置，请向左滑动

		var slides = document.querySelectorAll('.slider-item');
		var currentSlide = 0;
		var slideInterval = setInterval(nextSlide,2000);
    var slidesPreview = document.querySelectorAll('.preview-item');
		
		function nextSlide(){
		    goToSlide(currentSlide+1);}

		function previousSlide(){
		    goToSlide(currentSlide-1);}

		function goToSlide(n){
		    slides[currentSlide].classList.remove("active");
		    slidesPreview[currentSlide].classList.remove("current-preview");
		    currentSlide = (n+slides.length)%slides.length;
		    slides[currentSlide].classList.add("active");
		    slidesPreview[currentSlide].classList.add("current-preview");
		}

		var next = document.getElementById('next');
		var previous = document.getElementById('prev');

		next.onclick = function(){
		    nextSlide();};
		previous.onclick = function(){
		    previousSlide();};

.my-slider{
	position: relative;
	width: 100px;
	height: 100px;
}
.slider-item{
	width: 100px;
	height: 100px;
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
}
.slider-item.active{
	opacity: 1;
}
.item-preview{
	margin: 50px 0;
}
.preview-item{
 	position:relative;
	float: left;
  	width: 50px;
 	height: 50px;
}
.my-slider .navigation{
	position: absolute;
	top: 50px;
	left: 150px;
}
.slider-item:nth-child(1), .preview-item:nth-child(1){
	background: purple;
}
.slider-item:nth-child(2), .preview-item:nth-child(2){
	background: blue;
}
.slider-item:nth-child(3), .preview-item:nth-child(3){
	background: yellow;
}
.slider-item:nth-child(4), .preview-item:nth-child(4){
	background: green;
}
.preview-item.current-preview{
border: 3px solid red;
}

<div class="my-slider">
	<div class="slider-item active"></div>
	<div class="slider-item"></div>
	<div class="slider-item"></div>
	<div class="slider-item"></div>

	<div class="navigation">

		<button id="prev">previous</button>
		<button id="next">next</button>
	</div>
</div>

<div class="item-preview">
	<div class="preview-item current-preview"></div>
	<div class="preview-item"></div>
	<div class="preview-item"></div>
	<div class="preview-item"></div>
</div>