vue3中使用swiper7
https://blog.csdn.net/weixin_42063951/article/details/121354984
<template>
<div class="home">
<top-nav></top-nav>
<swiper
:modules="modules"
:slides-per-view="1"
:space-between="50"
navigation
:pagination="{ clickable: true }"
:scrollbar="{ draggable: true }"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
</swiper>
</div>
</template>
<script>
// @ is an alias to /src
import topNav from "@/components/topNav.vue";
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from "swiper";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/scrollbar/scrollbar.min.css";
export default {
name: "Home",
components: {
topNav,
Swiper,
SwiperSlide,
},
setup() {
const onSwiper = (swiper) => {
console.log(swiper);
};
const onSlideChange = () => {
console.log("slide change");
};
return {
onSwiper,
onSlideChange,
modules: [Navigation, Pagination, Scrollbar, A11y],
};
},
};
</script>
<template>
<div class="home">
<top-nav></top-nav>
<swiper
:modules="modules"
:slides-per-view="1"
:space-between="50"
:pagination="{ clickable: true }"
:autoplay="{
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
}"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
</swiper>
</div>
</template>
<script>
// @ is an alias to /src
import topNav from "@/components/topNav.vue";
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from "swiper";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/scrollbar/scrollbar.min.css";
export default {
name: "Home",
components: {
topNav,
Swiper,
SwiperSlide,
},
setup() {
const onSwiper = (swiper) => {
console.log(swiper);
};
const onSlideChange = () => {
console.log("slide change");
};
return {
onSwiper,
onSlideChange,
modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay],
};
},
};
</script>
<style lang="less" scoped>
.home {
.swiper{
width: 7.1rem;
display: flex;
justify-content: center;
}
.swiper-wrapper {
width: 7.1rem;
display: flex;
justify-content: center;
.swiper-slide {
line-height: 3rem;
border-radius: 0.1rem;
font-size: 0.3rem;
text-align: center;
background-color: pink;
}
}
}
</style>
