vue-awesome-swiper插件

vue-awesome-swiper插件

https://github.surmon.me/vue-awesome-swiper/

配置参考项：https://www.swiper.com.cn/api/grid/283.html

<template>
  <div class="photo_view">
    3333
    <swiper class="swiper" :options="swiperOption" ref="mySwiper">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
// import "swiper/css/swiper.css";

export default {
  name: "swiperphoto",
  title: "Free mode / No fixed positions",
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 2,
        slidesPerGroup: 2,

        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },
  methods: {}
};
</script>

<style scoped>
.photo_view {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.swiper {
  height: 100%;
  position: absolute;
  z-index: 999999999999999;
}
.swiper-button-next {
  left: 48vw !important;
}
</style>