swiper一組圖片，點擊圖片出現中間，看效果

好兄弟先看看效果是這樣的么

點擊哪個頭像，頭像移動到中間，然后放大，demo上寫了五條數據

廢話不多說 直接上代碼

1.引入swiper.css,

swiper.js

2.HTML(小弟做的是移動端的，所以meta-viewport要引入哦)

<div class="iconBanner">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<div class="swiper-slide">
									<img src="../images/1.jpg" alt="" />

								</div>
								<div class="swiper-slide">
									<img src="../images/2.jpeg" alt="" />

								</div>
								<div class="swiper-slide" data-check="1">
									<img src="../images/3.jpeg" alt="" />

								</div>
								<div class="swiper-slide">
									<img src="../images/4.jpg" alt="" />

								</div>
								<div class="swiper-slide">
									<img src="../images/5.jpeg" alt="" />

								</div>
							</div>
						</div>
					</div>

　　3.CSS

 

/*banner*/
body{
　　width:375px;
}
.iconBanner{
	width: 85%;
	margin: 0.11rem auto;
	height: 0.65rem;
}
.swiper-container {
	width: 100%;
	height: 0.65rem;
}

.swiper-slide {
	width: 0.4rem;
	height: 0.65rem;
	background-position: center;
	background-size: cover;
	transition: all 1s;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.swiper-slide img {
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
}

.swiper-slide.swiper-slide-active {
	transform: scale(1.5);
	z-index: 2;
}
.layui-bg-red{
	background:linear-gradient(0deg,#D9AC6A,#F5DFBD);
}
.layui-progress-big .layui-progress-text{
	position: relative;
	color: #C6B56B;
	font-size: 0.14rem;
	line-height: 0.25rem;
	padding: 0;
	top: -0.3rem;
	left: 0.1rem;
}

　　4.JS

先把屏幕自適應的js加上

<script>
			(function(doc, win) {
				var docEl = doc.documentElement,
					resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
					recalc = function() {
						var clientWidth = docEl.clientWidth;
						if(!clientWidth) return;
						docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
					};
				if(!doc.addEventListener) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener('DOMContentLoaded', recalc, false);
			})(document, window);
		</script>

　　接下來就是終極殺手鐧js，kan！

var swiper = new Swiper('.swiper-container', {
		loop: true,
		slidesPerView: '5', //設置slider容器能夠同時顯示的slides數量
		// active下 居中顯示
		centeredSlides: true,
		noSwiping: true, //設置為true時禁止切換
		slideToClickedSlide: true,
	});

　　復制粘貼，搞定，自己玩兒吧