vue 左右翻页

如果您想要在 Vue 中实现左右翻页功能，可以使用以下步骤：

1. 在 Vue 中引入需要的组件库或者自定义组件，例如 swiper.js 或者 vue-awesome-swiper。

2. 在组件中使用 swiper 组件，并设置好 swiper 的配置参数。例如：

<swiper :options="swiperOption">
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
</swiper>

import Swiper from 'swiper';
import 'swiper/css/swiper.css';

export default {
  data() {
    return {
      swiperOption: {
        direction: 'horizontal', // 横向滚动
        loop: true, // 循环滚动
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
    };
  },

  mounted() {
    // 初始化 swiper
    new Swiper('.swiper-container', this.swiperOption);
  },
};

3. 在 CSS 中设置好 swiper 的样式，例如：

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

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
}

4. 在 HTML 中添加左右翻页的按钮，例如：

<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

这样就可以在 Vue 中实现左右翻页功能了。