实现效果

如图所示，页面中有8个点，对应这bottom那8个标题，点击第二个线就长到第二个，点击底7个，线就长到第7个

代码实现

全部贴上来太多了，以3个为例

HTML结构

<div class="third section">
    <div class="content">
        <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>03</span>生物基及可降解材料</p>
            </div>
        </div>
    </div>

    <div class="line-cirs">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div class="light-line"></div>
    </div>

</div>

CSS样式

.third .detail-swiper{
    width: 450px;
    position: absolute;
    top: 55%;
    left: 11%;
    overflow: hidden;
}

.third .detail-swiper .left-text .line-one{
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.third .detail-swiper .left-text .line-two{
    width: 447px;
    margin-top: 22px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    line-height: 19px;
}

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

.third .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;
    border-bottom: 1px solid white;
}

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

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

.third .line-cirs{
    width: 78%;
    position: absolute;
    left: 11%;
    top: 52.6%;
    display: flex;
    z-index: 10;
    justify-content: space-between;
}

.third .line-cirs span{
    display: block;
    border-radius: 50%;
    height: 8px;
    width: 8px;
    border: 1px solid #073C82;
    transition: background-color 0.75s ease-in-out;
    z-index: 11;
    background-color: white;
}

.third .line-cirs .active-span{
    background-color: #073C82;
}

.third .line-cirs .light-line{
    position: absolute;
    left: 0;
    width: 14.4%;
    height: 2px;
    z-index: 10;
    background-color: #073C82;
    top: 50%;
    transform: translateY(-50%);
    transition: width 0.75s ease-in-out;
}

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 () {
            //切换结束时，执行内容
            // 进阶改的只有这个地方  14.28是计算出来的
            let index = this.activeIndex;
            $('.line-cirs span').eq(index - 1).addClass('active-span').siblings().removeClass('active-span');
            $('.light-line').css({
                'width': `${(index * 14.28) + '%'}`
            })
        },
    },

}