vue2 想使用 swiper插件中的 一次显示多个slides(110) 怎么写

可以使用 swiper 的 slidesPerView 选项来控制同时展示的 slide 个数，设置为 desired number(110) 即可。例如：

<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>

var swiper = new Swiper('.swiper-container', {
slidesPerView: 110,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});

相关问题

vue3 用swiper vue-awesome-swiper插件写一个轮播图

### 使用 `vue-awesome-swiper` 插件在 Vue 3 中创建轮播图

为了在 Vue 3 中使用 `vue-awesome-swiper` 创建轮播图，需先安装必要的依赖项。由于 `vue-awesome-swiper` 主要基于 Swiper 库构建，因此也需要安装 Swiper。

#### 安装依赖包
通过 npm 或 yarn 来安装所需的库：

npm install vue-awesome-swiper swiper --save

或者如果偏好使用 yarn:

yarn add vue-awesome-swiper swiper

#### 配置项目以支持 ES Modules 和 Composition API
考虑到 Vue 3 的特性以及对 Composition API 的支持，在 main.js 文件中引入并注册全局组件之前，应该确保按照官方文档配置好环境[^1]。

#### 编写轮播图组件代码
下面是一个简单的轮播图实现例子，适用于 Vue 3 及其组合式API风格：

// src/components/Carousel.vue
<template>
  <div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <div v-for="(slide, index) in slides" :key="index" class="swiper-slide">{{ slide }}</div>
    </div>

    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import 'swiper/css/swiper.css';

const props = defineProps({
  slides: {
    type: Array,
    default() {
      return ['Slide 1', 'Slide 2', 'Slide 3'];
    }
  },
});

let mySwiper;

onMounted(() => {
  import('vue-awesome-swiper').then(({ Swiper }) => {
    mySwiper = new Swiper('.swiper-container', {
      loop: true,

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  });
});
</script>

<style scoped>
/* Add custom styles here */
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background-color: #fff;
}
</style>

此示例展示了如何利用 `vue-awesome-swiper` 结合 Vue 3 构建一个基本的轮播图，并包含了分页指示符和导航箭头的功能。

vue3中使用swiper

在Vue3中使用Swiper，首先需要引入Swiper的核心库和相关组件，并注册为Vue组件。然后，在Vue的setup函数中使用ref()创建一个引用变量来获取Swiper实例。在onMounted钩子函数中，你可以打印这个引用变量，以确保实例已经被正确地获取到。

具体的代码示例如下：

<template>
  <swiper :slides-per-view="1" :scrollbar="{ draggable: true }" ref="mySwiper">
    <swiper-slide>1</swiper-slide>
    <swiper-slide>2</swiper-slide>
    <swiper-slide>3</swiper-slide>
  </swiper>
</template>

<script>
import SwiperCore, { Scrollbar, Pagination } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper.scss'
import 'swiper/components/scrollbar/scrollbar.scss'
import 'swiper/components/pagination/pagination.scss'
import { ref, defineComponent, onMounted } from 'vue'

SwiperCore.use([Scrollbar, Pagination])

export default defineComponent({
  name: 'Warhouse',
  components: { Swiper, SwiperSlide },
  setup() {
    const mySwiper = ref(null)

    onMounted(() => {
      console.log(mySwiper.value) // 打印Swiper实例
    })

    return {
      mySwiper
    }
  }
})
</script>

这样就可以在Vue3中使用Swiper了。记得根据你的实际情况调整Swiper的版本和其他配置。