html结构

<!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

常用参数

所列图

var about_box3_scroll2 = new Swiper ('.about_box3_scroll2', {
		// loop: true, // 循环模式选项
		speed:700,
		// autoplay: {
        //     delay: 5000,
        //     disableOnInteraction: false
        // },
		watchSlidesProgress: true,
		breakpoints: { 
            0: {  //当屏幕宽度大于等于320
              slidesPerView: 4,
              spaceBetween: 0
            },
            768: {  //当屏幕宽度大于等于768 
              slidesPerView: 5,
              spaceBetween: 20
            },
           992: {  //当屏幕宽度大于等于768 
                slidesPerView: 5,
                spaceBetween: 20
            },
			1200: {  //当屏幕宽度大于等于768 
                slidesPerView: 6,
                spaceBetween: 20
              },
            1400: {  //当屏幕宽度大于等于1280
              slidesPerView: 7,
              spaceBetween: 20
            }
        },
		watchSlidesProgress: true,
		
	})

	// about_box3_scroll3
	var about_box3_scroll3 = new Swiper ('.about_box3_scroll3', {
		// loop: true, // 循环模式选项
		speed:700,
		// autoplay: {
        //     delay: 5000,
        //     disableOnInteraction: false
        // },
		slidesPerView: 1,
		thumbs: {
			swiper: about_box3_scroll2,
			autoScrollOffset: 1,
		},
	})

多个滚动循环

$(".ind_box3_scroll").each(function(index,el){

		var ind_box3_scroll = new Swiper (el, {
			loop: true, // 循环模式选项
			autoplay : {
				delay:5000
			},
			speed:1000,
			breakpoints: { 
				//当swiper宽度大于等于768
				0: { 
					slidesPerView:2,
					spaceBetween : 10,
				},
				768: { 
					slidesPerView:3,
					spaceBetween : 20,
				},
				992: { 
					slidesPerView:4,
					spaceBetween : 20,
				},
				1200: { 
					slidesPerView:4,
					spaceBetween : 30,
				},
				1600: { 
					slidesPerView:4,
					spaceBetween : 47,
				},
				
			},
			navigation: {
				nextEl: $(".ind_box3_scroll_btn.next")[index],
				prevEl: $(".ind_box3_scroll_btn.prev")[index],
			},
		})


	})
	  

if ($(".ind_pro_scroll").is("div")) {

    let ind_pro_scroll = new Swiper(".ind_pro_scroll", {
        breakpoints: { 
            0: {  //当屏幕宽度大于等于320
              slidesPerView: 1,
              spaceBetween: 0
            },
            768: {  //当屏幕宽度大于等于768 
              slidesPerView: 3,
              spaceBetween: 20
            },
            1024: {  //当屏幕宽度大于等于768 
                slidesPerView: 3,
                spaceBetween: 20
              },
            1280: {  //当屏幕宽度大于等于1280
              slidesPerView: 3,
              spaceBetween: 40
            }
        },
        loop:true,
        effect: 'fade',
        centeredSlides: true,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false
        },
        navigation: {
            nextEl: '.banner_news_scroll_btn.next',
            prevEl: '.banner_news_scroll_btn.prev',
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
//缩略图滚动
// 上
watchSlidesProgress: true,
// 下
thumbs: {
          swiper: pro_det_pic_scroll,
        },
        pagination: {
            el: '.banner_bars_num',//分页数字
            type: 'custom',
            renderCustom: function (swiper, current, total) {
                return '<span class="'+'num">0'+current+'/</span>' + '<span class="'+'nums">0'+total+'</span>';
            }
        },
on: {
			init(swiper) {
				// 总数
				if (banner_num > 9) {
					$(".banner_num .nums").text(banner_num);
				} else {
					$(".banner_num .nums").text("0" + banner_num);
				}
				// 当前个数
				if ((swiper.realIndex + 1) > 9) {
					$(".banner_num .num").text(swiper.realIndex + 1);
				} else {
					$(".banner_num .num").text("0" + (swiper.realIndex + 1));
				}
			},
			slideChangeTransitionStart(swiper) {
				// 总数
				if (banner_num > 9) {
					$(".banner_num .nums").text(banner_num);
				} else {
					$(".banner_num .nums").text("0" + banner_num);
				}
				// 当前个数
				if ((swiper.realIndex + 1) > 9) {
					$(".banner_num .num").text(swiper.realIndex + 1);
				} else {
					$(".banner_num .num").text("0" + (swiper.realIndex + 1));
				}
			}
		},


样式：
.banner_b_line_box{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}
.banner_num_line{
	width: 100%;
	height: 1px;
	background: #fff;
	position: relative;
}
.banner_num_line .line{
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 1px;
	background: var(--hue);
}
.bannerLine{
	-webkit-animation-name: bannerLine;
	animation-name: bannerLine;
	animation-duration: 4.7s !important;
}

@keyframes bannerLine{
	0%{
		width: 0;
	}
	100%{
		width: 100%;
	}
}

                on: {
			slideChangeTransitionStart: function(){
			  //加入动画
			  $(".banner_num_line .line").removeClass("bannerLine");
			},
			slideChangeTransitionEnd: function(){
			  $(".banner_num_line .line").addClass("bannerLine");	
			},
		},
        pagination: {
            el: '.pro_det_t_l_bars',
            type : 'custom',
            clickable: true,
            renderCustom: function (swiper, current, total) {
    
                $('.pro_det_t_l_bars').children().eq(current - 1).addClass('active').siblings().removeClass('active');
     
                $('.pro_det_t_l_bars').on('click', 'div', function () {
                    pro_det_pic_scroll.slideToLoop($(this).index(), 1000, false)
                })
    
              }
        },

    })
}