vue-awesome-swiper的简单示例

vue-awesome-swiper 是基于swiper封装的vue组件，最后一个版本仅仅适配vue3,且目前已经停止维护

github.com/surmon-chin…

例子

github.surmon.me/vue-awesome…

swiper 文档4-7

www.swiper.com.cn/api/paramet…

swiper 文档3

3.swiper.com.cn/api/basic/2…

swiper 文档10

swiperjs.com/vue#swiper-…

npm install swiper vue-awesome-swiper --save 默认安装的 swiper版本是10，正常使用如下， 但是发现 不支持autoplay传参。
 "vue-awesome-swiper": "^5.0.1",
  "swiper": "10.0.0",

<template>
  https://github.surmon.me/vue-awesome-swiper
  <br />
  https://github.com/surmon-china/vue-awesome-swiper
  <swiper class="swiper" :modules="modules" :space-between="30" slides-per-view="auto" :pagination="{ clickable: true }">
    <swiper-slide class="slide">Slide 1</swiper-slide>
    <swiper-slide class="slide">Slide 2</swiper-slide>
    <swiper-slide class="slide">Slide 3</swiper-slide>
    <swiper-slide class="slide">Slide 4</swiper-slide>
    <swiper-slide class="slide">Slide 5</swiper-slide>
    <swiper-slide class="slide">Slide 6</swiper-slide>
    <swiper-slide class="slide">Slide 7</swiper-slide>
    <swiper-slide class="slide">Slide 8</swiper-slide>
  </swiper>
</template>

<script>
import { defineComponent } from 'vue';
import { Pagination } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css';
import 'swiper/css/pagination';

export default defineComponent({
  name: 'swiper-example-slides-per-view-auto',
  title: 'Slides per view auto',
  url: import.meta.url,
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    return {
      modules: [Pagination],
    };
  },
});
</script>

<style lang="scss" scoped>
// @import './variables.scss';
// @import './mixins.scss';
// @import './style.scss';

.swiper {
  width: 100%;
  height: 290px;
}

.slide {
  border: 1px solid #ccd;
  // width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;

  width: 80%;
  // &:nth-child(2n) {
  //   width: 80%;
  // }
  // &:nth-child(3n) {
  //   width: 40%;
  // }
}
</style>

如果需要 自动轮播可以将 swiper版本改到8.0.0 此时swiper需要注意其他参数引入方式， 以下是swiper8 + vue-awesome-swiper 支持轮播的代码

<template>
  https://github.surmon.me/vue-awesome-swiper
  <br />
  https://github.com/surmon-china/vue-awesome-swiper
  <swiper
    class="swiper"
    :speed="300"
    :modules="modules"
    :navigation="true"
    :autoplay="{
      delay: 2500,
      disableOnInteraction: false,
    }"
    :space-between="30"
    slides-per-view="auto"
    :pagination="{ clickable: true }"
  >
    <swiper-slide class="slide">Slide 1</swiper-slide>
    <swiper-slide class="slide">Slide 2</swiper-slide>
    <swiper-slide class="slide">Slide 3</swiper-slide>
    <swiper-slide class="slide">Slide 4</swiper-slide>
    <swiper-slide class="slide">Slide 5</swiper-slide>
    <swiper-slide class="slide">Slide 6</swiper-slide>
    <swiper-slide class="slide">Slide 7</swiper-slide>
    <swiper-slide class="slide">Slide 8</swiper-slide>
  </swiper>
</template>

<script>
import { defineComponent } from 'vue';
// import { Pagination } from 'swiper/modules';
import SwiperClass, { Pagination, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css';
import 'swiper/css/pagination';

export default defineComponent({
  name: 'swiper-example-slides-per-view-auto',
  title: 'Slides per view auto',
  url: import.meta.url,
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    return {
      modules: [Pagination, Autoplay],
    };
  },
});
</script>

<style lang="scss" scoped>
// @import './variables.scss';
// @import './mixins.scss';
// @import './style.scss';

.swiper {
  width: 100%;
  height: 290px;
}

.slide {
  border: 1px solid #ccd;
  // width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;

  width: 80%;
  // &:nth-child(2n) {
  //   width: 80%;
  // }
  // &:nth-child(3n) {
  //   width: 40%;
  // }
}
</style>