Адаптация слайдера между блоками при ресайзе

function slider() { 
 
  let slideIndex = 1, 
    slides = document.querySelectorAll('.slider_item'), 
    prev = document.querySelector('.prev'), 
    next = document.querySelector('.next'), 
    dotsWrapper = document.querySelector('.dots_wrapper'), 
    dots = document.querySelectorAll('.dot'), 
    slider = document.querySelector('.slider'); 
 
  showSlides(slideIndex); 
 
  function showSlides(n) { 
 
    if (n > slides.length) { 
      slideIndex = 1; 
    } 
    if (n < 1) { 
      slideIndex = slides.length; 
    } 
 
    slides.forEach((item) => item.style.display = 'none'); 
 
    dots.forEach((item) => item.classList.remove('dot_active')); 
 
    slides[slideIndex - 1].style.display = 'block'; 
    dots[slideIndex - 1].classList.add('dot_active'); 
  } 
 
  function plusSlides(n) { 
    showSlides(slideIndex += n); 
  } 
 
  function currentSlide(n) { 
    showSlides(slideIndex = n); 
  } 
 
  next.addEventListener('click', () => { 
    plusSlides(1); 
  }); 
 
  prev.addEventListener('click', () => { 
    plusSlides(-1); 
  }); 
 
  dotsWrapper.addEventListener('click', (event) => { 
    for (let i = 1; i <= dots.length; i++) { 
      if (event.target.classList.contains('dot') && 
        event.target == dots[i - 1]) { 
        currentSlide(i); 
        clearInterval(timerId); 
        autoshow(); 
      } 
    } 
  }); 
 
  let timerId; 
 
  function autoshow() { 
    timerId = setInterval(() => plusSlides(1), 2000); 
  } 
  autoshow(); 
  slider.addEventListener('mouseover', (event) => { 
    clearInterval(timerId); 
  }); 
 
  slider.addEventListener('mouseout', (event) => { 
    autoshow(); 
  }); 
} 
slider();

.slider-section {} 
 
.slider-wrapper { 
  width: 645px; 
  height: 292px; 
  margin: auto; 
  background: url(https://business-landing.website.yandexcloud.net/img/macbook.png); 
  background-size: 100% 100%; 
  position: relative; 
} 
 
.slider { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
} 
 
.slider img { 
  width: 445px; 
  height: 248px; 
} 
 
.dots_wrapper { 
  display: flex; 
  justify-content: center; 
  margin: 10px 0; 
} 
 
.dot { 
  margin: 0 10px; 
  width: 12px; 
  height: 12px; 
  border-radius: 50%; 
  cursor: pointer; 
  border: 2px solid #dedfe0; 
} 
 
.dot_active { 
  border: 2px solid #1ca8dd; 
}

<div class="slider-section"> 
  <div class="slider-wrapper"> 
    <div class="slider"> 
      <div class="slider_item"> 
        <img src="https://i.ibb.co/6HVCyCq/meetup-0.jpg"> 
      </div> 
      <div class="slider_item"> 
        <img src="https://i.ibb.co/1K6DBkq/meetup-1.jpg"> 
      </div> 
      <div class="slider_item"> 
        <img src="https://i.ibb.co/z8WK0sk/meetup-2.jpg"> 
      </div> 
    </div> 
    <div class="prev"> 
      <div class="arrow_left"></div> 
    </div> 
    <div class="next"> 
      <div class="arrow_right"></div> 
    </div> 
  </div> 
  <!--wrapper--> 
 
  <div class="dots_wrapper"> 
    <div class="dot dot_active"></div> 
    <div class="dot"></div> 
    <div class="dot"></div> 
  </div> 
</div>