【Vue.js】vue-awesome-swiperを使ってサムネイル付きのスライダーを作成する方法

今回は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
	})
  },
});

サンプル