Swiper制作滑动型产品展示图

效果图：

前些日子见到了这种效果图，本来想着用js敲可是估计又要废掉大半天，再加上时间紧而且没必要，就看了看现成的轮子。然而网上的轮子貌似都是jquery插件，无奈，突然想起Swiper貌似也能做，于是就弄出来了这些东西。

Swiper插件非常强大，真心佩服。由于通常网页中至少一个轮播图，所以这里会遇到如何如何在网页中插入两个Swiper且不产生冲突，解决方法在这里：click here~。

html：

	
	
	
	
	


	

	    

	      

	      	
	      	
八宝礼盒8*袋
	      
	      

	      	
	      	
杂粮绿豆面
	      
	      

	      	
	      	
五谷面食礼盒
	      
	      

	      	
	      	
绿豆面手盘面
	      
	      

	      	
	      	
荞面猫耳朵
	      
	      

	      	
	      	
高粱面饸饹
	      
	      

	      	
	      	
玉米面饸饹
	      
	    
	    
	    
	 
	

css：

.center-all {
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
  /* 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;
    flex-wrap: wrap;
    background: none;
    width: 240px;
    height: 185px;
}
.swiper-container {
    width: 1075px;
    height: 190px;
    margin-top: 50px;
    /*border: 1px solid gray;*/
}
.swiper-imagesize {
    width: 240px;
    height: 185px;
    border: 2px solid #6bc66b;
}
.swiper-wrapper {
    width: 1075px;
    height: 185px;
}
.product-desc {
    width: 240px;
    height: 20px;
    position: relative;
    top: -22px;
    color: white;
    background-color: rgba(84, 190, 84, 0.5);
}

js：

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 4,
  spaceBetween: 30,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  loop: true,
  freeMode: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

素材包在这里。。