swiper 带点

在这个例子中，通过设置`indicator-dot="false"`来隐藏了swiper自带的指示点。然后，根据`imgs`数组的长度创建了指示点。在`wxss`中，设置了指示点为横向排列，并定义了指示点的样式和选中时的状态。这样就实现了swiper带有指示点的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

相关问题

nuxt swiper带缩略图

要在 Nuxt 中使用带缩略图的 Swiper 组件，你需要安装 `swiper` 和 `vue-awesome-swiper` 两个依赖包。然后在你的 Nuxt 项目中，可以按照以下步骤实现带缩略图的 Swiper。

1. 安装依赖

npm install swiper vue-awesome-swiper --save

2. 在 Nuxt 中引入 Swiper

在 `nuxt.config.js` 文件中加入以下配置：

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

这段代码会把 Swiper 加入到 Nuxt 的 vendor 中，并且在客户端运行时加载 `vue-awesome-swiper` 插件。

3. 创建带缩略图的 Swiper 组件

在你的 Vue 单文件组件中，添加以下代码：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(image, index) in images" :key="index">
        <img :src="image.url" :alt="image.alt">
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-scrollbar"></div>
    <div class="swiper-thumbs-container">
      <div class="swiper-thumbs-wrapper">
        <div class="swiper-thumb" v-for="(image, index) in images" :key="index">
          <img :src="image.thumbUrl" :alt="image.alt">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        {
          url: 'https://placeimg.com/640/480/any',
          thumbUrl: 'https://placeimg.com/100/100/any',
          alt: 'Image 1',
        },
        {
          url: 'https://placeimg.com/640/480/nature',
          thumbUrl: 'https://placeimg.com/100/100/nature',
          alt: 'Image 2',
        },
        {
          url: 'https://placeimg.com/640/480/tech',
          thumbUrl: 'https://placeimg.com/100/100/tech',
          alt: 'Image 3',
        },
      ],
    }
  },
  mounted() {
    const swiper = this.$refs.swiper.$swiper
    const thumbsSwiper = this.$refs.thumbsSwiper.$swiper

    swiper.controller.control = thumbsSwiper
    thumbsSwiper.controller.control = swiper
  },
}
</script>

<style>
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-thumbs-container {
  margin-top: 10px;
}

.swiper-thumb {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.swiper-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid #ddd;
}

.swiper-thumb-active img {
  border-color: #333;
}
</style>

这段代码会创建一个带缩略图的 Swiper 组件，并且通过 `controller.control` 属性实现主 Swiper 和缩略图 Swiper 的交互。

4. 在页面中使用 Swiper 组件

在你的页面中，使用以下代码引入刚才创建的 Swiper 组件：

<template>
  <div>
    <swiper :options="swiperOptions" ref="swiper">
      <!-- Swiper slides -->
    </swiper>
    <div class="swiper-thumbs">
      <swiper :options="thumbOptions" ref="thumbsSwiper">
        <!-- Swiper thumbs -->
      </swiper>
    </div>
  </div>
</template>

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

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        scrollbar: {
          el: '.swiper-scrollbar',
        },
      },
      thumbOptions: {
        slidesPerView: 3,
        spaceBetween: 10,
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
      }
    }
  },
}
</script>

<style>
.swiper-thumbs {
  margin-top: 20px;
}
</style>

这段代码会在你的页面中使用刚才创建的 Swiper 组件，并且通过 `options` 属性传递 Swiper 配置参数。同时，缩略图 Swiper 组件也被嵌套在主 Swiper 组件中。

这样就可以实现在 Nuxt 中使用带缩略图的 Swiper 组件了。

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类来定义缩略图的样式。如果需要，您可以根据自己的需求进行修改。

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