Draggable Image Slider

.slider-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
  cursor: grab;
}

.slide {
  min-width: 100%;
  box-sizing: border-box;
}

.slide img {
  width: 100%;
  display: block;
}

.prev-btn, .next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1;
}

.prev-btn { left: 10px; }
.next-btn { right: 10px; }

document.addEventListener('DOMContentLoaded', () => {
  const slider = document.querySelector('.slider');
  const slides = document.querySelectorAll('.slide');
  const prevBtn = document.querySelector('.prev-btn');
  const nextBtn = document.querySelector('.next-btn');
  let currentIndex = 0;
  let isDragging = false;
  let startPos = 0;
  let currentTranslate = 0;
  let prevTranslate = 0;

  function setSliderPosition() {
    slider.style.transform = `translateX(${currentTranslate}px)`;
  }

  function getPositionX(event) {
    return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
  }

  function dragStart(event) {
    isDragging = true;
    startPos = getPositionX(event);
    slider.style.cursor = 'grabbing';
    slider.style.transition = 'none';
  }

  function dragging(event) {
    if (!isDragging) return;
    const currentPosition = getPositionX(event);
    currentTranslate = prevTranslate + currentPosition - startPos;
    setSliderPosition();
  }

  function dragEnd() {
    isDragging = false;
    const movedBy = currentTranslate - prevTranslate;
    if (movedBy < -100 && currentIndex < slides.length - 1) {
      currentIndex++;
    } else if (movedBy > 100 && currentIndex > 0) {
      currentIndex--;
    }
    slider.style.transition = 'transform 0.5s ease-in-out';
    currentTranslate = -currentIndex * slides[0].offsetWidth;
    prevTranslate = currentTranslate;
    setSliderPosition();
    slider.style.cursor = 'grab';
  }

  slider.addEventListener('mousedown', dragStart);
  slider.addEventListener('touchstart', dragStart);
  slider.addEventListener('mousemove', dragging);
  slider.addEventListener('touchmove', dragging);
  slider.addEventListener('mouseup', dragEnd);
  slider.addEventListener('touchend', dragEnd);
  slider.addEventListener('mouseleave', dragEnd);

  nextBtn.addEventListener('click', () => {
    if (currentIndex < slides.length - 1) {
      currentIndex++;
      currentTranslate = -currentIndex * slides[0].offsetWidth;
      prevTranslate = currentTranslate;
      setSliderPosition();
    }
  });

  prevBtn.addEventListener('click', () => {
    if (currentIndex > 0) {
      currentIndex--;
      currentTranslate = -currentIndex * slides[0].offsetWidth;
      prevTranslate = currentTranslate;
      setSliderPosition();
    }
  });
});