<swiper
:autoplay="swiper_option.autoplay"
:speed="swiper_option.speed"
:parallax="swiper_option.parallax"
:effect="swiper_option.effect"
:navigation="swiper_option.navigation"
grabCursor="true"
:pagination="swiper_option.pagination"
@slideChange="onSlideChange"
>
<div class="parallax-bg" data-swiper-parallax="-1%"></div>
<swiper-slide v-for="(item, index) in list" :key="index">
。。。。。。。。。。。。。。
</swiper-slide>
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</swiper>
</template>
<script>
import { reactive } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import SwiperCore, { Autoplay, Pagination, Parallax, Navigation } from "swiper";
import "swiper/swiper.min.css";
import "swiper/components/pagination/pagination.min.css";
import "swiper/components/navigation/navigation.min.css";
SwiperCore.use([Autoplay, Pagination, Parallax, Navigation]);
export default {
props: {
list: {
type: Array,
required: true,
},
},
components: {
Swiper,
SwiperSlide,
},
data() {
return {
isShow: false,
};
},
setup() {
let swiper_option = reactive({
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
parallax: true,
speed: 1000,
effect: "fade",
pagination: {
clickable: true,
dynamicBullets: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
hideOnClick: true,
},
});
return {
swiper_option,
};
},
methods: {
。。。。。。。。。
onSlideChange() {
this.isShow = false;
},
},
};
</script>