缩略图控制 / Swiper互相控制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>swiper测试</title> <link rel="stylesheet" href="./swiper.min.css"> <link rel="stylesheet" href="./animate.min.css"> <style type="text/css"> * { margin: 0; padding: 0 } html, body { position: relative; height: 100%; } .swiper-slide{ text-align: center; font-size: 18px; color: red; width: 80%; height: 300px; background-position: center; background-repeat: no-repeat; background-size: 100% auto; display: flex; justify-content: center; align-items: center; } .swiper-slide:nth-child(1){ background-image: url("01.jpg"); } .swiper-slide:nth-child(2){ background-image: url("02.jpg"); } .swiper-slide:nth-child(3){ background-image: url("03.jpg"); } #Swiper-one{ width: 100%; height: 300px; overflow-y: hidden; } .gallery-thumbs { height: 20%; box-sizing: border-box; padding: 10px 0; width: 100%; margin-left: auto; margin-right: auto; background-color: black; } .gallery-thumbs .swiper-slide { width: 25%; height: 100%; opacity: 0.4; background-size: cover; background-position: center; } .gallery-thumbs .swiper-slide-active { opacity: 1; } </style> </head> <body> <div class="swiper-container gallery-top" id="Swiper-one"> <div class="swiper-wrapper"> <div class="swiper-slide"> <p class="ani" swiper-animate-effect="fadeInUp">内容1</p> </div> <div class="swiper-slide"> <p class="ani" swiper-animate-effect="fadeInLeft">内容2</p> </div> <div class="swiper-slide"> <p class="ani" swiper-animate-effect="fadeInDown">内容3</p> </div> </div> <div class="swiper-scrollbar"></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> </div> <script src="jquery.min.js"></script> <script src="./swiper.min.js"></script> <script src="./swiper.animate.min.js"></script> <script> var galleryTop = new Swiper('.gallery-top', { spaceBetween: 10, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); var galleryThumbs = new Swiper('.gallery-thumbs', { spaceBetween: 10, centeredSlides: true, slidesPerView: 'auto', touchRatio: 0.2, slideToClickedSlide: true, }); galleryTop.controller.control = galleryThumbs; galleryThumbs.controller.control = galleryTop; </script> </body> </html>
.