今回はVue.jsを使ってサムネイルつきのswiperを作成する方法を紹介します。
「vue-awesome-swiperswiper」を使います。
swiperでサムネイル表示
ファイルの読み込み
まずVue.js、swiper、vue-awesome-swiperswiperなどの必要なファイルをhead内で読み込みます。
<link href="https://cdn.jsdelivr.net/npm/swiper@5.3.6/css/swiper.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/swiper@5.3.6/js/swiper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@4.1.1/dist/vue-awesome-swiper.js"></script>
html
<div id="app">
<swiper :options="swiperOptions" ref="swiperOptions" class="swiperOptions">
<swiper-slide>
<span><img src="img/1.jpg" alt=""></span>
</swiper-slide>
<swiper-slide>
<span><img src="img/2.jpg" alt=""></span>
</swiper-slide>
<swiper-slide>
<span><img src="img/3.jpg" alt=""></span>
</swiper-slide>
<swiper-slide>
<span><img src="img/4.jpg" alt=""></span>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<swiper :options="swiperThumbs" ref="swiperThumbs" class="swiperThumbs">
<swiper-slide>
<span><img src="img/1.jpg" alt="" /></span>
</swiper-slide>
<swiper-slide>
<span><img src="img/2.jpg" alt="" /></span>
</swiper-slide>
<swiper-slide>
<span><img src="img/3.jpg" alt="" /></span>
</swiper-slide>
<swiper-slide>
<span><img src="img/4.jpg" alt="" /></span>
</swiper-slide>
</swiper>
</div>
css
.swiperOptions .swiper-slide img,
.swiperThumbs .swiper-slide img{max-width: 100%;}
.swiperThumbs {background-color: #fff;}
.swiperOptions .swiper-slide {text-align: center;}
.swiperThumbs .swiper-slide {
text-align: center;
padding: 10px;
}
.swiperThumbs .swiper-slide-active {background-color: #eee;}
js
const VueAwesomeSwiper = window.VueAwesomeSwiper;
Vue.use(VueAwesomeSwiper);
new Vue({
el: "#app",
data: {
swiperOptions: {
loop: true,
loopedSlides: 4
},
swiperThumbs: {
loop: true,
loopedSlides: 4,
slidesPerView: 4,
slideToClickedSlide: true
}
},
mounted() {
this.$nextTick(() => {
const swiperOptions = this.$refs.swiperOptions.$swiper
const swiperThumbs = this.$refs.swiperThumbs.$swiper
swiperOptions.controller.control = swiperThumbs
swiperThumbs.controller.control = swiperOptions
})
},
});
コメント