使用jQuery / Javascript的内容滑块

<div class="slider-container">
  <div class="slider-content">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
</div>

.slider-container {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slider-content {
  width: 1500px; /* 每个内容块的宽度乘以内容块数量 */
  height: 300px;
  display: flex;
}

.slide {
  width: 500px; /* 内容块的宽度 */
  height: 300px;
}

var container = document.querySelector('.slider-container');
var content = document.querySelector('.slider-content');
var slides = document.querySelectorAll('.slide');
var slideWidth = slides[0].offsetWidth; // 获取内容块的宽度
var currentIndex = 0;

container.addEventListener('click', function() {
  currentIndex++;
  if (currentIndex >= slides.length) {
    currentIndex = 0;
  }
  var offset = -currentIndex * slideWidth;
  content.style.transform = 'translateX(' + offset + 'px)';
});