分類
<link href="css/swiper.css" rel="stylesheet"> <style type="text/css"> img{ width: 100%; } #gallery { width: 1200px; } #thumbs { width: 1000px; margin-top: 50px; } #thumbs .swiper-slide { opacity: 0.3; } #thumbs .swiper-slide-thumb-active{ opacity: 1; } </style>
<div class="swiper-container" id="gallery"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="img/img1.jpg" alt="輪播圖"> </div> <div class="swiper-slide"> <img src="img/img2.jpg" alt="輪播圖"> </div> <div class="swiper-slide"> <img src="img/img3.jpg" alt="輪播圖"> </div> <div class="swiper-slide"> <img src="img/img4.jpg" alt="輪播圖"> </div> <div class="swiper-slide"> <img src="img/img5.jpg" alt="輪播圖"> </div> </div> <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span> </div> <div class="swiper-container swiper-container-thumbs" id="thumbs"> <div class="swiper-wrapper" style="transition-duration: 0ms;"> <div class="swiper-slide"> <img src="img/img1.jpg" alt="輪播圖"> </div> <div class="swiper-slide"> <img src="img/img2.jpg" alt="輪播圖"> </div> <div class="swiper-slide"> <img src="img/img3.jpg" alt="輪播圖"> </div> <div class="swiper-slide"> <img src="img/img4.jpg" alt="輪播圖"> </div> <div class="swiper-slide"> <img src="img/img5.jpg" alt="輪播圖"> </div> </div> <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span> </div> <script type="text/javascript" src="js/swiper.min.js"></script> <script type="text/javascript"> var thumbsSwiper = new Swiper('#thumbs', { spaceBetween: 10, slidesPerView: 5, watchSlidesVisibility: true, //防止不可點擊 }) var gallerySwiper = new Swiper('#gallery', { effect : 'coverflow', spaceBetween: 10, //縮略圖間距 slidesPerView: 3, centeredSlides: true, initialSlide :2, loop: true, autoplay: true, thumbs: { swiper: thumbsSwiper, } }) </script>
1. 本站所有素材(未指定商用),僅限學習交流。
2. 會員在本站下載的原創(chuàng)商用和VIP素材后,只擁有使用權(quán),著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材,未經(jīng)合法授權(quán),請勿用于商業(yè)用途,會員不得以任何形式發(fā)布、傳播、復制、轉(zhuǎn)售該素材,否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途,織夢系統(tǒng)商業(yè)用途請預先授權(quán)。