使用swiper8写一个轮播图组件

最新推荐文章于 2024-05-31 10:07:20 发布

努力学前端Hang

最新推荐文章于 2024-05-31 10:07:20 发布

阅读量274

点赞数

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_57108418/article/details/128506175

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

本文展示了如何使用Vue.js结合Swiper库创建一个具备自动轮播、左右导航箭头、分页指示器和滚动条的图片轮播组件。代码中详细配置了Swiper的属性和事件监听，如autoplay、pagination、navigation和scrollbar，同时定义了imglist作为图片数据源。

摘要由CSDN通过智能技术生成

1、代码展示

<template>
    <swiper :modules="modules" :slides-per-view="1" :space-between="50" :loop="true"
        :autoplay="{ delay: 1000, disableOnInteraction: false }" navigation :pagination="{ clickable: true }"
        :scrollbar="{ draggable: true }" @swiper="onSwiper" @slideChange="onSlideChange">
        <swiper-slide v-for="item,index in imglist" :key="index"><img :src="item"></swiper-slide>
    </swiper>
</template>
<script setup>
// 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';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

// Import Swiper styles

let data=defineProps({
    imglist:{
        default(){
            return {}
        },
        type:Array
    }
})

const onSwiper = (swiper) => {
    console.log(swiper);
};
const onSlideChange = () => {

};
const modules = [Autoplay, Pagination, Navigation, Scrollbar,A11y]

</script>