vue左右滑动翻页效果

你可以使用vue-awesome-swiper插件来实现左右滑动翻页的效果。这是一个基于Swiper封装的Vue组件，提供了丰富的配置选项和API，非常适合用于轮播图、图片展示等场景。

首先，你需要通过npm安装vue-awesome-swiper插件：

npm install vue-awesome-swiper --save

然后在你的Vue组件中引入和使用该插件：

<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 class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

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

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  }
}
</script>

<style>
/* swiper样式 */
.swiper-container {
  width: 100%;
  height: 300px;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

在上面的示例中，我们引入了Swiper和SwiperSlide组件，并在data选项中设置了Swiper的配置选项。其中，pagination选项用于显示分页器，el属性指定了分页器的容器元素。

你可以根据需要，修改配置选项和样式，来实现更加个性化的左右滑动翻页效果。