vue3使用swiper
vue3使用swiper
·
安装swiper
npm i swiper@verson --save
使用
<template>
<Swiper>
<SwiperSlide>1</SwiperSlide>
<SwiperSlide>2</SwiperSlide>
<SwiperSlide>3</SwiperSlide>
</Swiper>
</template>
<script lang="ts" setup>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/effect-cube';
import 'swiper/css/pagination';
</script>
<style scoped lang="less">
.swiper {
width: 500px;
height: 500px;
margin: calc(50% - 250px) auto;
.swiper-slide {
background: yellow;
}
}
</style>
效果
效果配置
<template>
<Swiper
:effect="'cube'"
:grabCursor="true"
:loop="true"
:cubeEffect="{
shadow: true,
slideShadows: true,
shadowOffset: 30,
shadowScale: 1,
}"
:pagination="true"
:modules="[EffectCube, Pagination]"
/>
</template>
<script lang="ts" setup>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/effect-cube';
import 'swiper/css/pagination';
// import required modules
import { EffectCube, Pagination } from 'swiper';
</script>
效果
参考
更多推荐
已为社区贡献6条内容
所有评论(0)