jQuery 轮播图 当前图为大图 下图只能看到五张图 中间为小图加样式

以下是一个简单的 jQuery 轮播图，当前图为大图，下图只能看到五张图，中间为小图加样式的示例代码：

HTML 代码：

<div class="slider">
  <div class="slider-main">
    <div class="slider-item active">
      <img src="img/1.jpg" alt="">
    </div>
    <div class="slider-item">
      <img src="img/2.jpg" alt="">
    </div>
    <div class="slider-item">
      <img src="img/3.jpg" alt="">
    </div>
    <div class="slider-item">
      <img src="img/4.jpg" alt="">
    </div>
    <div class="slider-item">
      <img src="img/5.jpg" alt="">
    </div>
    <div class="slider-item">
      <img src="img/6.jpg" alt="">
    </div>
  </div>
  <div class="slider-nav">
    <div class="slider-prev">
      <i class="fa fa-angle-left"></i>
    </div>
    <ul class="slider-dots">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="slider-next">
      <i class="fa fa-angle-right"></i>
    </div>
  </div>
</div>

CSS 代码：

.slider {
  position: relative;
  overflow: hidden;
}

.slider-main {
  position: relative;
  width: 100%;
  height: 500px;
}

.slider-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.slider-item.active {
  opacity: 1;
}

.slider-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-prev,
.slider-next {
  cursor: pointer;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  transition: all 0.3s ease-in-out;
}

.slider-prev:hover,
.slider-next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.slider-prev i,
.slider-next i {
  font-size: 20px;
}

.slider-dots {
  margin: 0 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-dots li {
  cursor: pointer;
  margin: 0 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease-in-out;
}

.slider-dots li.active {
  width: 15px;
  height: 15px;
  background-color: #fff;
}

JavaScript 代码：

$(document).ready(function() {
  // 定义变量
  var currentSlide = 0;
  var sliderTimer;

  // 自动轮播
  function startSlider() {
    sliderTimer = setInterval(function() {
      currentSlide = (currentSlide + 1) % 6;
      showSlide(currentSlide);
    }, 5000);
  }

  // 停止轮播
  function stopSlider() {
    clearInterval(sliderTimer);
  }

  // 显示指定的轮播图
  function showSlide(index) {
    // 移除所有轮播图的 active 类名
    $('.slider-item').removeClass('active');
    // 显示当前轮播图
    $('.slider-item').eq(index).addClass('active');
    // 移除所有小圆点的 active 类名
    $('.slider-dots li').removeClass('active');
    // 显示当前小圆点的 active 类名
    $('.slider-dots li').eq(index).addClass('active');
  }

  // 点击上一张按钮
  $('.slider-prev').click(function() {
    currentSlide = (currentSlide - 1 + 6) % 6;
    showSlide(currentSlide);
    stopSlider();
    startSlider();
  });

  // 点击下一张按钮
  $('.slider-next').click(function() {
    currentSlide = (currentSlide + 1) % 6;
    showSlide(currentSlide);
    stopSlider();
    startSlider();
  });

  // 点击小圆点
  $('.slider-dots li').click(function() {
    currentSlide = $(this).index();
    showSlide(currentSlide);
    stopSlider();
    startSlider();
  });

  // 开始轮播
  startSlider();
});