vue-awesome-swiper 缩略图

vue-awesome-swiper 是一个 Vue.js 的轮播图组件，它支持各种轮播效果和特性，其中包括缩略图。缩略图是指在轮播图下方或者旁边添加一个小型的图片列表，用于快速浏览轮播图中的所有图片，并可在缩略图上点击选择相应的轮播图。vue-awesome-swiper 的缩略图功能可以通过 v-bind:thumbs 属性来设置，thumbs 属性可以是一个包含图片路径的数组，也可以是一个包含图片路径和描述的对象数组。当 thumbs 属性被设置后，一个包含缩略图的轮播图就会被自动生成，并与主轮播图关联起来，当主轮播图滚动到某一张图片时，对应的缩略图会被设置为 active 状态。通过设置 thumbsSlideOptions 属性可以修改缩略图轮播图的一些参数，例如缩略图滑动方向、缩略图高度、缩略图间距等。需要注意的是，如果启用了缩略图功能，vue-awesome-swiper 要求主轮播图和缩略图的图片数量必须一致，否则可能会出现一些异常情况。

相关问题

swiper，vue-awesome-swiper缩略图轮播

以下是使用vue-awesome-swiper实现缩略图轮播的示例代码：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in list" :key="index">
        <img :src="item.imgUrl" alt="">
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-scrollbar"></div>
    <div class="swiper-container thumbnail">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in list" :key="index">
          <img :src="item.imgUrl" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'swiper/css/swiper.css'
import { Swiper, Pagination, Scrollbar, Thumbs } from 'swiper/js/swiper.esm'

Swiper.use([Pagination, Scrollbar, Thumbs])

export default {
  data() {
    return {
      list: [
        { imgUrl: 'https://picsum.photos/id/1018/500/300' },
        { imgUrl: 'https://picsum.photos/id/1015/500/300' },
        { imgUrl: 'https://picsum.photos/id/1019/500/300' },
        { imgUrl: 'https://picsum.photos/id/1020/500/300' },
        { imgUrl: 'https://picsum.photos/id/1021/500/300' }
      ]
    }
  },
  mounted() {
    const mySwiper = new Swiper('.swiper-container', {
      loop: true,
      pagination: {
        el: '.swiper-pagination'
      },
      scrollbar: {
        el: '.swiper-scrollbar'
      },
      thumbs: {
        swiper: {
          el: '.thumbnail',
          slidesPerView: 4,
          spaceBetween: 10,
          watchSlidesVisibility: true,
          watchSlidesProgress: true
        }
      }
    })
  }
}
</script>

<style>
.thumbnail .swiper-slide {
  opacity: 0.4;
  transform: scale(0.5);
  transition: all 0.3s ease;
}

.thumbnail .swiper-slide-thumb-active {
  opacity: 1;
  transform: scale(1);
}
</style>

在这个示例中，我们使用了vue-awesome-swiper插件来实现轮播效果，并使用了thumbs选项来实现缩略图轮播。具体来说，我们在Swiper的配置中添加了thumbs选项，并在其中配置了一个新的Swiper实例，用于显示缩略图。我们还通过watchSlidesVisibility和watchSlidesProgress选项来确保缩略图与主轮播图同步。

nuxt vue-awesome-swiper 带缩略图控制

要使用Nuxt和vue-awesome-swiper来实现带缩略图控制的滑动器，可以按照以下步骤：

1. 安装vue-awesome-swiper和swiper：

npm install --save vue-awesome-swiper swiper

2. 在nuxt.config.js中添加以下内容来引入所需的CSS文件和插件：

module.exports = {
  css: [
    'swiper/css/swiper.css'
  ],
  plugins: [
    { src: '@/plugins/vue-awesome-swiper', ssr: false }
  ]
}

3. 创建一个新的Vue组件，例如`Slider.vue`，并在其中使用vue-awesome-swiper：

<template>
  <div class="slider-container">
    <swiper :options="swiperOptions">
      <swiper-slide v-for="(slide, index) in slides" :key="index">
        <img :src="slide.image" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
      <swiper-thumbs :swiper="swiper" :slides-per-view="5" :watch-active-index="true" class="thumbs"></swiper-thumbs>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, SwiperThumbs } from 'vue-awesome-swiper'

export default {
  components: {
    Swiper,
    SwiperSlide,
    SwiperThumbs
  },
  data() {
    return {
      slides: [
        { image: 'https://picsum.photos/id/1018/800/600' },
        { image: 'https://picsum.photos/id/1015/800/600' },
        { image: 'https://picsum.photos/id/1019/800/600' },
        { image: 'https://picsum.photos/id/1016/800/600' },
        { image: 'https://picsum.photos/id/1020/800/600' }
      ],
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        thumbs: {
          swiper: {
            slidesPerView: 5,
            watchSlidesVisibility: true,
            watchSlidesProgress: true
          },
          slideThumbActiveClass: 'thumb-active',
          slideThumbClass: 'thumb'
        }
      }
    }
  }
}
</script>

<style scoped>
.thumb {
  opacity: 0.5;
  transition: opacity 0.2s ease-in-out;
}
.thumb-active {
  opacity: 1;
}
</style>

在这个例子中，我们首先导入了`Swiper`、`SwiperSlide`和`SwiperThumbs`组件，然后定义了一个`slides`数组来存储我们要展示的图片。接下来，我们创建了一个名为`swiperOptions`的对象来配置我们的滑动器，包括分页、导航和缩略图等选项。最后，我们将这些选项传递给`<swiper>`组件和`<swiper-thumbs>`组件，并使用`v-for`指令在`<swiper-slide>`中动态渲染图片。

请注意，在这个例子中，我们还使用了一些自定义CSS类来定义缩略图的样式。如果需要，您可以根据自己的需求进行修改。

希望这可以帮助您实现一个带缩略图控制的滑动器！