輪播圖之縮略圖API
阿新 • • 發佈：2019-05-13
har html ont hsl -s fff progress type round
<!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