Swiper制作滑动型产品展示图

来源:csdn博客 分类: 文章浏览史 发布时间:2020-09-03 09:31:33 最后更新:2020-09-03 浏览:20
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-09-03 09:31:33

效果图:

展示图

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

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

html:

<!DOCTYPE html>
<html>
<head>
	<title>滑动型产品展示图</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./swiper.min.css">
	<link rel="stylesheet" type="text/css" href="./test18.css">
	<script src="./swiper.min.js"></script>
</head>
<body>
	<div class="swiper-container">
	    <div class="swiper-wrapper">
	      <div class="swiper-slide">
	      	<img src="./images/1.jpg" class="swiper-imagesize">
	      	<div class="product-desc center-all">八宝礼盒8*袋</div>
	      </div>
	      <div class="swiper-slide">
	      	<img src="./images/2.jpg" class="swiper-imagesize">
	      	<div class="product-desc center-all">杂粮绿豆面</div>
	      </div>
	      <div class="swiper-slide">
	      	<img src="./images/3.jpg" class="swiper-imagesize">
	      	<div class="product-desc center-all">五谷面食礼盒</div>
	      </div>
	      <div class="swiper-slide">
	      	<img src="./images/4.jpg" class="swiper-imagesize">
	      	<div class="product-desc center-all">绿豆面手盘面</div>
	      </div>
	      <div class="swiper-slide">
	      	<img src="./images/5.jpg" class="swiper-imagesize">
	      	<div class="product-desc center-all">荞面猫耳朵</div>
	      </div>
	      <div class="swiper-slide">
	      	<img src="./images/6.jpg" class="swiper-imagesize">
	      	<div class="product-desc center-all">高粱面饸饹</div>
	      </div>
	      <div class="swiper-slide">
	      	<img src="./images/7.jpg" class="swiper-imagesize">
	      	<div class="product-desc center-all">玉米面饸饹</div>
	      </div>
	    </div>
	    <!-- Add Pagination -->
	    <!-- <div class="swiper-pagination"></div> -->
	 </div>
	<script type="text/javascript" src="./test18.js"></script>
</body>
</html>

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,
  },
});

素材包在这里。。

php技术微信