实现效果

注意点

1、第二张图缩略 2、线条跟着所在的张数变化

代码实现

HTML结构

<div class="right" aos="fade-up" aos-delay="400">
    <div class="swiper-container product_warp">
      <div class="swiper-wrapper">
        <!-- 第一张图 -->
        <div class="swiper-slide">
          <a href="productlist.html">
            <div class="images">
              <img src="static/images/products/slide1.png" alt="" />
            </div>
            <p>PCR认证塑料</p>
          </a>
        </div>
        <!-- 第二张图 -->
        <div class="swiper-slide">
          <a href="productlist.html">
            <div class="images">
              <img src="static/images/products/slide1.png" alt="" />
            </div>
            <p>PCR认证塑料</p>
          </a>
        </div>
        <!-- 第三张图 -->
        <div class="swiper-slide">
          <a href="productlist.html">
            <div class="images">
              <img src="static/images/products/slide1.png" alt="" />
            </div>
            <p>PCR认证塑料</p>
          </a>
        </div>
      </div>
      <!-- 分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <!-- 线 -->
    <div class="line">
      <div class="after"></div>
    </div>
    <!-- 点击按钮 -->
    <div class="product_warp_button">
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next button_active"></div>
    </div>
</div>

CSS样式

.right{
    width: 1446px;
    margin-top: 87px;
    overflow: hidden;
}

.right .product_warp{
    width: 100%;
    position: relative;
}

.right .product_warp .swiper-wrapper{
    transition-timing-function: cubic-bezier(.77,0,.175,1);
}

.right .product_warp .swiper-slide{
    position: relative;
    left: -367px;
}

.right .product_warp .swiper-slide-next {
    transform: scale(0.8);
    transition: 0.6s;
}

.right .product_warp .swiper-slide .images{
    width: 757px;
    height: 410px;
    overflow: hidden;
    position: relative;
}

.right .product_warp .swiper-slide .images img{
    width: 100%;
    position: absolute;
    bottom: 0;
    transition: 0.6s;
}

.right .product_warp .swiper-slide-active .images img{
    height: 100%;
}

.right .product_warp .swiper-slide p{
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #1E1E1E;
    margin-top: 29px;
    opacity: 0;
    transition: 0.6s;
    transition-delay: 0.2s;
}

.right .product_warp .swiper-slide-active p{
    opacity: 1;
}

.right .product_warp .swiper-pagination{
    display: flex;
    align-items: baseline;
    bottom: -5px;
    left: 45%;
}

.right .product_warp .swiper-pagination span:first-child{
    font-size: 24px;
    font-weight: bold;
}

.right .product_warp .swiper-pagination span{
    font-size: 14px;
    font-family: Saira Condensed;
    font-weight: 600;
    color: #343434;
    letter-spacing: 2px;
    margin-right: 3px;
    margin-left: 3px;
}

.right .line{
    width: 1213px;
    height: 1px;
    background: #E2E2E2;
    margin-top: 74px;
    position: relative;
}

.right .line .after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    background: #D71518;
    transition: 0.6s;
}

JS

// 产品轮播图
let length = $(".first .right .product_warp .swiper-slide").length;
let line = $(".first .right .line").width();
let nb = line / length;
document.querySelector(".first .right .line .after").style.width = nb + "px";

var swiper7 = new Swiper(".right .product_warp", {
  speed: 800,
  slidesPerView: 1,
  spaceBetween: 116,
  centeredSlides: true,
  navigation: {
    nextEl: ".right .swiper-button-next",
    prevEl: ".right .swiper-button-prev",
  },
  pagination: {
    el: ".product_warp .swiper-pagination",
    type: "fraction",
    renderFraction: function (currentClass, totalClass) {
      return (
        '<span class="' + currentClass +'"></span>' +
        "/" +
        '<span class="' +totalClass +'"></span>'
      );
    },
    formatFractionCurrent: function (number) {
      return number < 10 ? "0" + number : number;
    },
    formatFractionTotal: function (number) {
      return number < 10 ? "0" + number : number;
    },
  },
  on: {
    slideChange: function () {
      let index = this.activeIndex + 1;
      $(".first .right .line .after").css({width: `${index * nb + "px"}`,});
      let num = "0" + index;
      $(".number").html(num);
    },
  },
  breakpoints: {
    769: {
      slidesPerView: 2,
      initialSlide: 0,
    },
  },
});