vue swiper vue-awesome-swiper 代码 点击左右切换 添加点

你可以通过以下代码实现 Vue-Awesome-Swiper 的左右切换和添加点：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
    }
  },
}
</script>

在这个例子中，我们将 Vue-Awesome-Swiper 的组件导入到我们的 Vue 组件中，并且定义了一个 `swiperOptions` 对象，它包含了配置左右切换和添加点的选项。

在模板中，我们将 `swiper` 组件放置在 `swiper-container` 元素中，并将其所有子元素包装在 `swiper-wrapper` 元素中。我们还在 `swiper-container` 元素下方添加了一个 `swiper-pagination` 元素和两个按钮用于左右切换。

请注意，我们还导入了 Swiper 的 CSS 文件，并将其应用于我们的组件。