---
tags: Swiper
---
# Thumbs Gallery 直式
###### tags: `swiper`
### HTML

<div class="swiper-container-wrapper gallery-container">
  <div class="swiper-container gallery-main">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="圖片1">
      </div>
      <div class="swiper-slide">
        <img src="圖片2">
      </div>
      <div class="swiper-slide">
        <img src="圖片3">
      </div>
      <div class="swiper-slide">
        <img src="圖片4">
      </div>
      <div class="swiper-slide">
        <img src="圖片5">
      </div>
      <div class="swiper-slide">
        <img src="圖片6">
      </div>
    </div>
  </div>
  <div class="swiper-container gallery-thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="圖片1"></div>
      <div class="swiper-slide"><img src="圖片2"></div>
      <div class="swiper-slide"><img src="圖片3"></div>
      <div class="swiper-slide"><img src="圖片4"></div>
      <div class="swiper-slide"><img src="圖片5"></div>
      <div class="swiper-slide"><img src="圖片6"></div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>

JQUERY
- watchOverflow 啟用後，如果沒有足夠的幻燈片可滑動，則會禁用“滑動”，並隱藏導航按鈕。
- watchSlidesProgress 啟用此功能可以計算每張幻燈片的進度
- watchSlidesVisibility 啟用此選項，視口中的幻燈片將具有其他可見類
- direction 'horizontal' | 'vertical' 用於水平或垂直滑塊
- preventInteractionOnTransition 啟用後，不允許在過渡過程中通過滑動或導航/分頁按鈕來更改幻燈片

var galleryThumbs = new Swiper('.gallery-thumbs', {
  spaceBetween: 20,
  slidesPerView: 3,
  watchOverflow: true,
  watchSlidesProgress: true,
  watchSlidesVisibility: true,
  direction: 'vertical',
  autoHeight: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  breakpoints: {
    640: {
      direction: 'horizontal',
      slidesPerView: 2,
    },
    991: {
      direction: 'horizontal',
    }
  },
});
var galleryMain = new Swiper('.gallery-main', {
  watchOverflow: true,
  watchSlidesProgress: true,
  watchSlidesVisibility: true,
  preventInteractionOnTransition: true,
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  },
  thumbs: {
    swiper: galleryThumbs
  },
});
galleryMain.on('slideChangeTransitionStart', function() {
  galleryThumbs.slideTo(galleryMain.activeIndex);
});
galleryThumbs.on('transitionStart', function() {
  galleryMain.slideTo(galleryThumbs.activeIndex);
});
galleryThumbs.update();
$(window).resize(function() {
  galleryMain.update();
  galleryThumbs.update();
});

SASS

.gallery-container {
  display: flex;
  justify-content: space-between;
}
.gallery-main {
  width: 75%;
  padding-right: 5px;
}
.gallery-thumbs {
  order: 1;
  width: 25%;
  padding-left: 5px;
  .swiper-slide {
    img {
      transition: 0.3s;
    }
  }
}