Слайдер Javascript работает, но он жестко запрограммирован

Question

Мне нужно четыре ползунка на одной странице, все они с разным содержанием.

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

Даже точки в ползунках жестко запрограммированы!

И я не смог найти способ сделать его более динамичным.

Вот ссылка на мой код: код

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>