Vue3中使用Swiper8
最近在开发时需要用到轮播效果,想着用swiper实现一下,一看官网,都更新到8了,看了官网跟着配置了一下,发现根本不能用......因为Swiper8已经更新好多次了,官网的示例的引入路径也早已经在最新版做了改变,但是官网没有更新,我们需要去看node_modules中swiper具体的路径废话不多说,开始版本说明: 先在你的项目中直接使用,如果不行再更新指定的版本//卸载vuenpm unins
·
最近在开发时需要用到轮播效果,想着用swiper实现一下,一看官网,都更新到8了,看了官网跟着配置了一下,发现根本不能用......
因为Swiper8已经更新好多次了,官网的示例的引入路径也早已经在最新版做了改变,但是官网没有更新,我们需要去看node_modules中swiper具体的路径
在实现之前,先介绍一下Swiper:
-
Swiper是纯Javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。
-
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
-
Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择。
Swiper的应用场景广泛,实现效果很好,下面个这实际案例就是Swiper的典型应用场景。
废话不多说,开始
版本说明: 先在你的项目中直接使用,如果不行再更新指定的版本
//卸载vue
npm uninstall vue
//安装指定版本
npm install vue@3.2.33
//卸载swiper
npm uninstall swiper
//安装指定版本
npm install swiper@3.2.33
"swiper": "^8.1.6",
"vue": "^3.2.33",
<template>
<swiper
:modules="modules"
:pagination="{ clickable: true }"
:autoplay="autoplayOptions"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide>1</swiper-slide>
<swiper-slide>2</swiper-slide>
<swiper-slide>3</swiper-slide>
</swiper>
</template>
<script lang="ts" setup>
//这里就是更新后的路径,以前是import { Swiper, SwiperSlide } from 'swiper/vue'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue'
import { Pagination, A11y, Autoplay } from 'swiper'
//这里就是更新后的路径,以前是import 'swiper/css'
import 'swiper/swiper.min.css'
//自动轮播的配置
const autoplayOptions = {
delay: 500,
disableOnInteraction: false,
loop: false,
pauseOnMouseEnter: true,
reverseDirection: true
}
const onSwiper = (swiper: any) => {
console.log(swiper)
}
const onSlideChange = (e) => {
// swiper切换的时候执行的方法
console.log('slide change', e.activeIndex)
}
const modules = [Pagination, A11y, Autoplay]
</script>
<style lang="less" scoped>
.swiper {
.swiper-slide {
height: 200px;
}
}
</style>
好了,刷新页面效果就有了
注意:如果安装以前的6.几的版本时,可能会出现安装的swiper/vue里面没有东西。个人猜测是swiper给删除了
更多推荐
已为社区贡献2条内容
所有评论(0)