如何创建离子滑块，并在当前幻灯片中显示下一张幻灯片和前一张幻灯片的一些像素

<div id="slider-container">
  <div id="slider">
    <div class="slide">幻灯片1</div>
    <div class="slide">幻灯片2</div>
    <div class="slide">幻灯片3</div>
    ...
  </div>
</div>

#slider-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#slider {
  width: 300%; /* 假设有3张幻灯片 */
  height: 100%;
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  width: 33.33%; /* 假设有3张幻灯片 */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

const sliderContainer = document.getElementById('slider-container');
let currentPosition = 0;

sliderContainer.addEventListener('touchstart', handleTouchStart, false);
sliderContainer.addEventListener('touchmove', handleTouchMove, false);

let startX = 0;
let startY = 0;

function handleTouchStart(event) {
  startX = event.touches[0].clientX;
  startY = event.touches[0].clientY;
}

function handleTouchMove(event) {
  const deltaX = event.touches[0].clientX - startX;
  const deltaY = event.touches[0].clientY - startY;

  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    event.preventDefault();
    currentPosition -= deltaX;
    updateSliderPosition();
  }
}

function updateSliderPosition() {
  const slider = document.getElementById('slider');
  slider.style.transform = `translateX(${currentPosition}px)`;
}

const slideWidth = document.querySelector('.slide').offsetWidth;
const nextSlidePixels = currentPosition + slideWidth;
const prevSlidePixels = currentPosition - slideWidth;