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
        }
      });

  最后引入樣式


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM