Vue项目,使用vue-awesome-swiper插件(可一次切换多张)

一、准备工作

1、下载插件(最新版本的swiper可能会出现未知bug,所以我用的是5.4.5版本)

npm install swiper@5.4.5 vue-awesome-swiper@4.1.1 --save

二、页面使用

1、引入

import 'swiper/css/swiper.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

2、注册组件

components:{ Swiper, SwiperSlide }

3、在data中设置options

data() {
    return {
      options: {
        pagination: {
          el: ".case-swiper-pagination"
          //区分不同Swiper的组件
        },
        //显示分页
        loop: true,
        //开启循环
        loopedSlides: 6,
        //设置平滑
        slidesPerView: 3,
        //设置能够同时显示的数量(可设置 auto)
        speed: 1000,
        //切换速度

        navigation: {
          prevEl: ".swiper-button-prev2",
          nextEl: ".swiper-button-next2"
        },
        //左右箭头按钮(可自定义)

        // autoplay: false,
        //是否开启自动轮播

        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
      
### 使用 `vue-awesome-swiper` 插件Vue 3 中创建轮播图 为了在 Vue 3 中使用 `vue-awesome-swiper` 创建轮播图,需先安装必要的依赖项。由于 `vue-awesome-swiper` 主要基于 Swiper 库构建,因此也需要安装 Swiper。 #### 安装依赖包 通过 npm 或 yarn 来安装所需的库: ```bash npm install vue-awesome-swiper swiper --save ``` 或者如果偏好使用 yarn: ```bash yarn add vue-awesome-swiper swiper ``` #### 配置项目以支持 ES Modules 和 Composition API 考虑到 Vue 3 的特性以及对 Composition API 的支持,在 main.js 文件中引入并注册全局组件之前,应该确保按照官方文档配置好环境[^1]。 #### 编写轮播图组件代码 下面是一个简单的轮播图实现例子,适用于 Vue 3 及其组合式API风格: ```javascript // 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 构建一个基本的轮播图,并包含了分页指示符和导航箭头的功能。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值