代码实现

html结构

<!-- 上面的轮播图 -->
<div class="detail-swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="left-text">
        <p class="line-one">PCR认证塑料1</p>
        <p class="line-two">坚锋对数字化驱动的功能化专业平台构建的畅想，有助于将数字化供应链转身为企业的利润中心，精准地把握客户需求，提高客户体验和服务水平，让企业和客户、企业与供应商形成价值网...</p>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="left-text">
        <p class="line-one">PCR认证塑料2</p>
        <p class="line-two">坚锋对数字化驱动的功能化专业平台构建的畅想，有助于将数字化供应链转身为企业的利润中心，精准地把握客户需求，提高客户体验和服务水平，让企业和客户、企业与供应商形成价值网...</p>
      </div>
    </div>
  </div>
</div>

<!-- 下面的文字 -->
<div class="bottom">
    <div class="item active-p current">
      <p><span>01</span>PCR认证塑料</p>
    </div>
    <div class="item">
      <p><span>02</span>PCR改性塑料</p>
    </div>
    <div class="item">
      <p><span>07</span>PCR零碳产品</p>
    </div>
    <div class="item">
      <p><span>08</span>智慧生活PCR产品</p>
    </div>
</div>

CSS样式

.detail-swiper{
    position: absolute;
    top: 556px;
    left: 213px;
    width: 450px;
    overflow: hidden;
}

.bottom {
    width: 88%;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    bottom: 39px;
    left: 121px;
}

.bottom .item{
    width: 420px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666;
    line-height: 61px;
    margin-top: 19px;
    transition: 1s;
}

.bottom .active-p{
    color: #073C82;
    border-bottom: 1px solid #073C82;
}

.bottom .item p{
    text-align: center;
}

JS

// 轮播图初始化
var detailSwiper = new Swiper('.third .detail-swiper', {
    loop: true, // 循环模式选项
    slideToClickedSlide: true,
    spaceBetween : 13,
    centeredSlides: true,
    slidesPerView: 1,
    // autoplay:true,
    on: {
        slideChange: function () {
            $('.third .bottom .item').removeClass('active-p')
            $('.third .bottom .item').eq(this.realIndex).addClass('active-p');
        },
        slideChangeTransitionEnd: function () {
            //切换结束时，执行内容
        },
    },
})

// p对轮播图的控制
$('.third .bottom .item').click(function () {
    detailSwiper.slideToLoop($(this).index())
})