vue3 使用swiper制作带缩略图的轮播图

news2024/11/18 3:31:11

效果图

实现代码

<template>
  <div class="wrap">
    <!-- 主轮播图 -->
    <swiper :style="{
      '--swiper-navigation-color': '#fff',
      '--swiper-pagination-color': '#fff',
    }" :modules="modules" :navigation="true" :thumbs="{ swiper: thumbsSwiper }">
      <SwiperSlide v-for="slide in slides" :key="slide">
        <img style="width: 300px" :src="slide" alt="main slide" />
      </SwiperSlide>
    </swiper>

    <!-- 缩略轮播图 -->
    <swiper @swiper="setThumbsSwiper"
    :spaceBetween="10"
    :slidesPerView="3"
    :freeMode="true"
    :watchSlidesProgress="true"
    :modules="modules"
    class="thumbsSwiper">
      <SwiperSlide v-for="slide in slides" :key="slide">
        <img style="width: 100px" :src="slide" alt="main slide" />
      </SwiperSlide>
    </swiper>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { FreeMode, Navigation, Thumbs } from 'swiper/modules';

import 'swiper/css';
import 'swiper/css/free-mode';
import 'swiper/css/navigation';
import 'swiper/css/thumbs';

const slides = ref(['https://temp.im/200x200/4CD964/fff', 'https://temp.im/200x200/999999/fff', 'https://temp.im/200x200/666666/fff', 'https://temp.im/200x200/9696ff/fff','https://temp.im/200x200/696969/fff', 'https://temp.im/200x200/333333/fff']);
const thumbsSwiper = ref(null);
const setThumbsSwiper = (swiper) => {
  thumbsSwiper.value = swiper;
};
const modules = [FreeMode, Navigation, Thumbs];
</script>

<style lang="scss" scoped>
.wrap {
  width: 300px;
  background: #000;
  position: relative;
}
.thumbsSwiper {
  .swiper-slide {
    opacity: 0.4;
  }
  .swiper-slide-thumb-active {
    opacity: 1;
  }
} 
</style>