vue中使用swiper5縮略圖

引入Swiper

import Swiper from "swiper";

html

    <div class="swiper-container gallery-top">
              <div class="swiper-wrapper">
             
                <div class="swiper-slide">2222</div>
               <div class="swiper-slide">3333</div>
              </div>
              <!-- Add Arrows -->
              <div
                v-if="simulatedDATA.video||(!simulatedDATA.video&&simulatedDATA.images.length>1)"
              >
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
              </div>
            </div>
            <!-- swiper -->
            <div class="swiper-container gallery-thumbs">
              <div class="swiper-wrapper">
              <div class="swiper-slide">2222</div>
               <div class="swiper-slide">3333</div>
              </div>
            </div>
            <!-- Add Arrows -->
            <div class="add_white_button">
              <div class="arrows_left"></div>
              <div class="arrows_right"></div>
            </div>                    

　
實例加載完成后js

      let galleryThumbs = new Swiper(".gallery-thumbs", {
        freeMode: false,
        watchSlidesVisibility: true,
        spaceBetween: 2,  //邊距
        touchRatio: 0.2, //滑動占比
        slidesPerView: 6,
        loopedSlides: 6,
        loop: false,  //無限切換
        slideToClickedSlide: true,
        watchSlidesProgress: true,
        navigation: {
          nextEl: ".arrows_left",
          prevEl: ".arrows_right"
        }
      });
      let galleryTop = new Swiper(".gallery-top", {
        loop: true,
        spaceBetween: 0,
        loopedSlides: 6,
        speed: 1000,
        allowTouchMove: true,
        // hideOnClick: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        thumbs: {
          swiper: galleryThumbs
        }
      });

　　最后引入樣式