swiper

html

<div class="banner">
			<div class="swiper-container banner-imp" style="height: 2rem;">
				<div class="swiper-wrapper" onclick="showMosk3()">
					<div class="swiper-slide" title="前车轮胎" data-index="0">
						<img src="" alt="" class="oneimg">
					</div>
					<div class="swiper-slide" title="前车轮胎2" data-index="1">
						<img src="" alt="" class="twoimg">
					</div>
					<div class="swiper-slide" title="前车轮胎3" data-index="2">
						<img src="" alt="" class="thrimg">
					</div>
					<div class="swiper-slide" title="前车轮胎4" data-index="3">
						<img src="" alt="" class="fouimg">
					</div>
					<div class="swiper-slide" title="前车轮胎5" data-index="4"> 
						<img src="" alt="" class="fivimg">
					</div>
					<div class="swiper-slide" title="前车轮胎6" data-index="5">
						<img src="" alt="" class="siximg">
					</div>
					<div class="swiper-slide" title="前车轮胎7" data-index="6">
						<img src="" alt="" class="sevimg">
					</div>
					<div class="swiper-slide" title="前车轮胎8" data-index="7">
						<img src="" alt="" class="aigimg">
					</div>
					<div class="swiper-slide" title="前车轮胎9" data-index="8">
						<img src="" alt="" class="nigimg">
					</div>
					<div class="swiper-slide" title="前车轮胎10" data-index="9">
						<img src="" alt="" class="tenimg">
					</div>
				</div>
			</div>
		</div>
//普通轮播 js
var mySwiper = new Swiper('.banner-imp', {
				// pagination : ".banner .swiper-pagination",
				direction: 'horizontal', // 水平切换选项
				// autoplay: {
				// 	disableOnInteraction: false //是否轮播
				// },
				// loop: true, // 无缝循环 默认为false
				grabCursor: true,
				observer: true, //swiper自己或子元素变化时，自动初始化swiper //重点，一点要放
				observeParents: true //swiper的父元素变化时，自动初始化swiper //重点，一点要放
			})
// 进阶轮播
<div class="swiper-container gallery-top">
				<div class="swiper-wrapper">
					<div class="swiper-slide" title="前车轮胎" >
						<img src="" alt="" class="oneimg">
					</div>
					<div class="swiper-slide" title="前车轮胎2">
						<img src="" alt="" class="twoimg">
					</div>
					<div class="swiper-slide" title="前车轮胎3">
						<img src="" alt="" class="thrimg">
					</div>
					<div class="swiper-slide" title="前车轮胎4">
						<img src="" alt="" class="fouimg">
					</div>
					<div class="swiper-slide" title="前车轮胎5">
						<img src="" alt="" class="fivimg">
					</div>
					<div class="swiper-slide" title="前车轮胎6">
						<img src="" alt="" class="siximg">
					</div>
					<div class="swiper-slide" title="前车轮胎7">
						<img src="" alt="" class="sevimg">
					</div>
					<div class="swiper-slide" title="前车轮胎8">
						<img src="" alt="" class="aigimg">
					</div>
					<div class="swiper-slide" title="前车轮胎9">
						<img src="" alt="" class="nigimg">
					</div>
					<div class="swiper-slide" title="前车轮胎10">
						<img src="" alt="" class="tenimg">
					</div>
				</div>
			</div>
			<p class="car"></p>
			<!-- Add Pagination -->
			<span class="swiper-pagination"></span>
			<div class="swiper-container gallery-thumbs">
				<div class="swiper-wrapper">
					<div class="swiper-slide" title="前车轮胎">
						<img src="" alt="" class="oneimg">
					</div>
					<div class="swiper-slide" title="前车轮胎2">
						<img src="" alt="" class="twoimg">
					</div>
					<div class="swiper-slide" title="前车轮胎3">
						<img src="" alt="" class="thrimg">
					</div>
					<div class="swiper-slide" title="前车轮胎4">
						<img src="" alt="" class="fouimg">
					</div>
					<div class="swiper-slide" title="前车轮胎">
						<img src="" alt="" class="fivimg">
					</div>
					<div class="swiper-slide" title="前车轮胎">
						<img src="" alt="" class="siximg">
					</div>
					<div class="swiper-slide" title="前车轮胎">
						<img src="" alt="" class="sevimg">
					</div>
					<div class="swiper-slide" title="前车轮胎">
						<img src="" alt="" class="aigimg">
					</div>
					<div class="swiper-slide" title="前车轮胎">
						<img src="" alt="" class="nigimg">
					</div>
					<div class="swiper-slide" title="前车轮胎">
						<img src="" alt="" class="tenimg">
					</div>
				</div>
			</div>
			//车易拍查看大图。左右滑动实时切换title，显示位于第几张图片.
			setInterval(function() {
					var index; //全局变量
					$('.car').html($('.gallery-top .swiper-wrapper .swiper-slide-active').attr('title'));
							}, 1000)
							$('.banner-imp .swiper-wrapper .swiper-slide').on('click',function(){
								index = $(this).attr('data-index')
								var galleryThumbs = new Swiper('.gallery-thumbs', {
									
									initialSlide :index,//从第几张图显示
									spaceBetween: 10,
									slidesPerView: 4,
									freeMode: true,
									watchSlidesVisibility: true,
									watchSlidesProgress: true,
									observer: true, //swiper自己或子元素变化时，自动初始化swiper
									observeParents: true //swiper的父元素变化时，自动初始化swiper
								});
								var galleryTop = new Swiper('.gallery-top', {
									// 1/10张图 显示目前位于第几张图
									pagination: {
									  el: '.swiper-pagination',
									  type: 'fraction',
									},
									initialSlide :index,//从第几张图显示
									// pagination: "#loadingBg3 .swiper-pagination",
									spaceBetween: 10,
									thumbs: {
										swiper: galleryThumbs
									},
									grabCursor: true,
									observer: true, //swiper自己或子元素变化时，自动初始化swiper
									observeParents: true //swiper的父元素变化时，自动初始化swiper
								});
							})
PS:一个页面使用多个swiper插件, new Swiper('.gallery-top'）这里自定义class用来区分swiper作用域