轮播图之缩略图API

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="swiper.min.css">
		<script src="swiper.min.js"></script>
		<style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #000;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }
    .swiper-slide {
      background-size: cover;
      background-position: center;
    }
    .gallery-top {
      height: 100%;
      width: 100%;
    }
    .gallery-thumbs {
      height: 5%;
      padding: 10px 0;
	  color:#fff;
	  font-size:24px;
	  position:fixed;
	  top:0;
    }
    .gallery-thumbs .swiper-slide {
      width: 25%;
      height: 100%;
      
    }
    .gallery-thumbs .swiper-slide-thumb-active {
      color:red;
    }

  </style>

	</head>
	<body>
		  <div class="swiper-container gallery-top">
			<div class="swiper-wrapper">
			  <div class="swiper-slide" style="background-image:url(img/1.jpg)"></div>
			  <div class="swiper-slide" style="background-image:url(img/2.jpg)"></div>
			  <div class="swiper-slide" style="background-image:url(img/3.jpg)"></div>
			  <div class="swiper-slide" style="background-image:url(img/4.jpg)"></div>
			</div>
		  </div>
		  <div class="swiper-container gallery-thumbs">
			<div class="swiper-wrapper">
			  <div class="swiper-slide">图一</div>
			  <div class="swiper-slide">图二</div>
			  <div class="swiper-slide">图三</div>
			  <div class="swiper-slide">图四</div>
			</div>
		  </div>

		<script language="javascript"> 
		var galleryThumbs = new Swiper('.gallery-thumbs', {
		  spaceBetween: 10,
		  slidesPerView: 4,
		  freeMode: true,
		  watchSlidesVisibility: true,
		  watchSlidesProgress: true,
		});
		var galleryTop = new Swiper('.gallery-top', {
		  spaceBetween: 10,
		  thumbs: {
			swiper: galleryThumbs
		  }
		})

		</script>
	</body>
</html>

©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值