---
tags: Swiper
---
# Thumbs Gallery(略縮圖 無循環)
**version 4.5.0**
**~~version 4.5.1~~** (不使用此版本，因為無循環時小圖沒有.active)

galleryThumbs = 小圖
galleryTop = 大圖

- 無循環
- 小圖只能透過"點擊"滑動，"觸摸"滑動會有問題，故設定為不允許"觸摸"滑動
- 大圖只能透過"觸摸"滑動
- 箭頭需綁在大圖(1張)下，故判斷組件出現時機(≧4)無效
- 當顯示的slides數量 = 4，會判斷實際slides數量若與顯示的slides數量相等時，則將按鈕隱藏

<iframe height="454" style="width: 100%;" scrolling="no" title="thumbs" src="https://codepen.io/aso3580/embed/abmPXBE?height=454&theme-id=dark&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/aso3580/pen/abmPXBE'>thumbs</a> by Luke.H
(<a href='https://codepen.io/aso3580'>@aso3580</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>