轮播图之缩略图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>
轮播图之缩略图API

猜你喜欢
