Как клонировать слайдер?

Хочу сделать на одной странице слайдер, но чтобы на одном из них были стрелки переключения а на втором только картинка переключалась когда нажимаешь на первом слайдере стрелки. Задача в том что у меня на главной есть блок и в этом блоке справа должен быть слайдер с переключателем а слева просто превью картинка которая так же переключается.

<div class="slider">
          <div class="item" id="item-1">
            <img src="./assets/img/bowser/1.png" alt="#">
          </div>

          <div class="item" id="item-2">
            <img src="./assets/img/bowser/2.png" alt="#">
          </div>

          <div class="item">
            <img src="./assets/img/bowser/3.png" alt="#">
          </div>
          <div class="item">
            <img src="./assets/img/bowser/4.png" alt="#">
          </div>
          <div class="item">
            <img src="./assets/img/bowser/5.png" alt="#">
          </div>

          <a class="prev" onclick="minusSlide()">&#10094;</a>
          <a class="next" onclick="plusSlide()">&#10095;</a>
        </div>


var slideIndex = 1;
showSlides(slideIndex);

function plusSlide() {
  showSlides(slideIndex += 1);
}

function minusSlide() {
  showSlides(slideIndex -= 1);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("item");
  var slides2 = document.getElementsByClassName("item2");
  var dots = document.getElementsByClassName("slider-dots_item");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "flex";
  dots[slideIndex - 1].className += " active";
}