🤹♀️潜意识起点：个人主页
🎙座右铭：得之坦然，失之淡然。
💎擅长领域：大前端
是的，我需要您的：
🧡点赞❤️关注💙收藏💛
是我持续下去的动力！
- 其他爆火文章：微信小程序完整笔记
目录
❤️一. 作者有话说
众所周知，轮播图是大家都比较常见的，轮播图是一个合格的前端必须掌握的，但是以我的情况是我知道了了轮播图是swper但是一些属性还不是很了解，因此，我想写这一篇文章，目的是帮我自己巩固轮播图，重新认识一下轮播图的有关属性，也帮大家总结总结，提升大家的网页编程水平。🧡
❤️二. 最简单轮播图
💛2.1 最简单的轮播图vue3代码
注意点
- 用swiper作为父组件
- 每一张图用swiper-item包裹着
- 下面的css代码正常写就可以了，怎么好看怎么来。
这是一个用setup语法糖的vue3组件 🧡🧡🧡
<template>
<swiper class="bigbox">
<!-- 第一张图用swiper-item包裹 -->
<swiper-item>
<image src="../../static/slider_1.jpg"></image>
</swiper-item>
<!-- 第二张图 -->
<swiper-item>
<image src="../../static/slider_2.jpg"></image>
</swiper-item>
<!-- 第三张图 -->
<swiper-item>
<image src="../../static/slider_3.jpg"></image>
</swiper-item>
<!-- 第四张图 -->
<swiper-item>
<image src="../../static/slider_4.jpg"></image>
</swiper-item>
</swiper>
</template>
<script setup>
</script>
<style scoped>
.bigbox{
/* 一个页面是宽就是750rpx */
width: 750rpx;
height: 400rpx;
background-color: aquamarine;
}
image{
width:100%;
height: 100%;
}
</style>
💙2.2 效果图
❤️三. 增加指示点
💛3.1 带指示点实现步骤介绍
在swiper的标签上加上 indicator-dots 就可以实现带圆点。🧡
💙3.2 代码实现
<swiper class="bigbox" indicator-dots>
<!-- 第一张图用swiper-item包裹 -->
<swiper-item>
<image src="../../static/slider_1.jpg"></image>
</swiper-item>
<!-- 第二张图 -->
<swiper-item>
<image src="../../static/slider_2.jpg"></image>
</swiper-item>
<!-- 第三张图 -->
<swiper-item>
<image src="../../static/slider_3.jpg"></image>
</swiper-item>
<!-- 第四张图 -->
<swiper-item>
<image src="../../static/slider_4.jpg"></image>
</swiper-item>
</swiper>🧡3.3 效果图
❤️四. 调节指示点的颜色
💛4.1 指示点颜色步骤介绍
💙4.2 指示点颜色改变代码
<swiper class="bigbox" indicator-dots indicator-color="#00ff7f" indicator-active-color="#006400">
<!-- 第一张图用swiper-item包裹 -->
<swiper-item>
<image src="../../static/slider_1.jpg"></image>
</swiper-item>
<!-- 第二张图 -->
<swiper-item>
<image src="../../static/slider_2.jpg"></image>
</swiper-item>
<!-- 第三张图 -->
<swiper-item>
<image src="../../static/slider_3.jpg"></image>
</swiper-item>
<!-- 第四张图 -->
<swiper-item>
<image src="../../static/slider_4.jpg"></image>
</swiper-item>
</swiper>🧡4.3 效果图
❤️五. 轮播图的自动切换
💛5.1 自动切换的步骤
在swiper添加autoplay属性🧡🧡🧡
💙5.2 自动切换代码
<swiper class="bigbox" indicator-dots autoplay>
<!-- 第一张图用swiper-item包裹 -->
<swiper-item>
<image src="../../static/slider_1.jpg"></image>
</swiper-item>
<!-- 第二张图 -->
<swiper-item>
<image src="../../static/slider_2.jpg"></image>
</swiper-item>
<!-- 第三张图 -->
<swiper-item>
<image src="../../static/slider_3.jpg"></image>
</swiper-item>
<!-- 第四张图 -->
<swiper-item>
<image src="../../static/slider_4.jpg"></image>
</swiper-item>
</swiper>❤️六. 滑动衔接
衔接图片一直往右划一直有图片🧡🧡🧡
💛6.1 滑动衔接效果图
💙6.2 滑动衔接代码
<swiper class="bigbox" indicator-dots circular>
<!-- 第一张图用swiper-item包裹 -->
<swiper-item>
<image src="../../static/slider_1.jpg"></image>
</swiper-item>
<!-- 第二张图 -->
<swiper-item>
<image src="../../static/slider_2.jpg"></image>
</swiper-item>
<!-- 第三张图 -->
<swiper-item>
<image src="../../static/slider_3.jpg"></image>
</swiper-item>
<!-- 第四张图 -->
<swiper-item>
<image src="../../static/slider_4.jpg"></image>
</swiper-item>
</swiper>❤️七. 轮播图总结
❤️
本次轮播图的总结算是比较完整的，后期会进行添加新的知识，希望大家都能学到知识能在前端的道路上越走越远。希望大家的编程水平能越来越好！！！
❤️
❤️
<swiper>组件提供了多种属性来自定义轮播行为，如autoplay（自动播放）、interval（播放间隔）、duration（滑动动画时长）等❤️
❤️
通过上面的学习，你可以在uniapp项目中创建一个功能丰富、外观吸引人的轮播图组件。记得根据你的具体需求调整样式和行为，以确保轮播图与你的应用设计保持一致。希望能获得大家的一个关注，谢谢！
❤️
🤹♀️潜意识起点：个人主页
🎙座右铭：得之坦然，失之淡然。
💎擅长领域：大前端
是的，我需要您的：
🧡点赞❤️关注💙收藏💛
是我持续下去的动力！
- 其他爆火文章：微信小程序完整笔记
840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
