分类
<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. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。