Javascript滑块可以使用，但是经过硬编码

Question

我在一页中需要四个滑块，它们的内容都不同。

到目前为止，我已经创建了两个滑块，它们可以正常工作，但是我还需要两个滑块。然后我意识到原来是太多的代码。

即使滑块中的点也是硬编码的！

我找不到使它更具动态性的方法。

以下是我的代码的链接： code

var thumbnails = document.querySelectorAll('.slide-dots li');
var slider1 = document.querySelector('.slider-1');
var slider2 = document.querySelector('.slider-2');
var slider3 = document.querySelector('.slider-3');
var slider4 = document.querySelector('.slider-4');



var dot1 = document.querySelector('.dot1');
var dot2 = document.querySelector('.dot2');

var dot3 = document.querySelector('.dot3');
var dot4 = document.querySelector('.dot4');

// console.log(thumbnails);

thumbnails.forEach(thumbnail => {

  thumbnail.addEventListener('click', function(item) {
    var dot = item.target;
    console.log(dot);


    if (dot.classList.contains("slider1")) {
      slider2.style.display = 'none';
      slider1.style.display = 'flex';

      dot2.classList.remove('active-dot');
      dot1.classList.add('active-dot');
    } else if (dot.classList.contains("slider2")) {

      slider1.style.display = 'none';
      slider2.style.display = 'flex';

      dot1.classList.remove('active-dot');
      dot2.classList.add('active-dot');
    } else if (dot.classList.contains("slider3")) {
      // dot.style.backgroundColor = "red";
      slider4.style.display = 'none';
      slider3.style.display = 'flex';

      dot4.classList.remove('active-dot');
      dot3.classList.add('active-dot');
    } else if (dot.classList.contains("slider4")) {
      // dot.style.backgroundColor = "red";
      slider3.style.display = 'none';
      slider4.style.display = 'flex';

      dot3.classList.remove('active-dot');
      dot4.classList.add('active-dot');
    }

  })
});

<div class="myslider">
  <ul class="slide-dots">
    <li class="slider1 dot1"></li>
    <li class="slider2 dot2"></li>
  </ul>
  <div class="slider slider-1">
    <div class="slider__img">
      <img src="https://images.unsplash.com/photo-1472718888560-1a1292f1cccb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="img">
    </div>
    <div class="contents">
      <div class="content">
        <h1>Lorem ipsum</h1>
        <p>kjlaskldjaklsjdklajsdlkjaskldjlkasjdklas</p>
      </div>

    </div>
  </div>

  <div class="slider slider-2" style="display:none">
    <div class="slider__img">
      <img src="https://images.unsplash.com/photo-1450820900803-38abb1b52bbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1347&q=80" alt="img">
    </div>
    <div class="contents">
      <div class="content">
        <h1>Lorem ipsum</h1>
        <p>sssssssss</p>
      </div>
    </div>
  </div>

</div>

<!-- //////SLIDER 2////// -->
<div class="myslider">
  <ul class="slide-dots">
    <li class="slider3 dot3"></li>
    <li class="slider4 dot4"></li>
  </ul>
  <div class="slider slider-3">
    <div class="slider__img">
      <img src="https://images.unsplash.com/photo-1472718888560-1a1292f1cccb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="img">
    </div>
    <div class="contents">
      <div class="content">
        <h1>Lorem ipsum doret sit amet</h1>
        <p>asdasdasd</p>
      </div>

    </div>
  </div>

  <div class="slider slider-4" style="display:none">
    <div class="slider__img">
      <img src="https://images.unsplash.com/photo-1450820900803-38abb1b52bbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1347&q=80" alt="img">
    </div>
    <div class="contents">
      <div class="content">
        <h1>Lorem ipsum amet sit doret</h1>
        <p>ssssssssaaaaaaas</p>
      </div>
    </div>
  </div>

</div>