js实现div左右滑动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Slider</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="slider" class="slider-container">
  <div class="slider-content">
    <!-- 这里放置滑动的内容 -->
    <p>内容1</p>
    <p>内容2</p>
    <p>内容3</p>
    <!-- 更多内容 -->
  </div>
</div>
<button onclick="slideLeft()">向左滑动</button>
<button onclick="slideRight()">向右滑动</button>
<script src="script.js"></script>
</body>
</html>

.slider-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

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

let currentPosition = 0;
const slideWidth = 300; // 每个滑动项的宽度
const maxSlides = 3; // 最多显示的滑动项数量
const totalSlides = document.querySelectorAll('.slider-content p').length; // 总滑动项数量

function slideLeft() {
  if (currentPosition < 0) {
    currentPosition += slideWidth;
    document.querySelector('.slider-content').style.transform = `translateX(${currentPosition}px)`;
  }
}

function slideRight() {
  if ((currentPosition + (maxSlides * slideWidth)) < (totalSlides * slideWidth)) {
    currentPosition -= slideWidth;
    document.querySelector('.slider-content').style.transform = `translateX(${currentPosition}px)`;
  }
}