Как адаптировать слайдер на Javascript на мобильную версию?

Question

[wixxixxx]

Javascript

const slider = document.querySelector(".slider");
const prevBtn = document.querySelector(".prev-btn");
const nextBtn = document.querySelector(".next-btn");

let currentIndex = 0;

prevBtn.addEventListener("click", () => {
  currentIndex = (currentIndex - 1 + 6) % 6;
  updateSlider();
});

nextBtn.addEventListener("click", () => {
  currentIndex = (currentIndex + 1) % 6;
  updateSlider();
});

function updateSlider() {
  const slideWidth = slider.clientWidth / 3;
  slider.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
}

updateSlider();

CSS

body {
    font-family: Arial, sans-serif;
  }
  
  .slider-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  .slider {
    display: flex;
    transition: transform 0.3s ease-in-out;
  }
  
  .slide {
    flex: 0 0 33.33%;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  
  .slide img {
    max-width: 100%;
    max-height: 100%;
  }
  
  .prev-btn,
  .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px 15px;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
  }
  
  .prev-btn {
    left: 0;
  }
  
  .next-btn {
    right: 0;
  }
  @media (max-width: 768px) {
    .slide {
      flex: 0 0 100%;
    }
  }

Есть слайдер, пытался адаптировать через медиа запрос в джаваскрипте на мобильную версию, но в итоге сменяется сразу 3 изображения, хочу чтоб на мобильной версии сменялось по 1, а пк версия осталось нетронутой.

Comments

[VoidVolker]

wixxixxx Правила 3.8.

Answer 1

[nonconformiste]

в помощь window.innerWidth и отслеживание события resize у window.