🤹♀️潜意识起点：个人主页
🎙座右铭：得之坦然，失之淡然。
💎擅长领域：大前端
是的，我需要您的：
🧡点赞❤️关注💙收藏💛
是我持续下去的动力！
- 其他爆火文章：微信小程序完整笔记
目录
❤️一. 作者有话说
众所周知，轮播图是大家都比较常见的，轮播图是一个合格的前端必须掌握的，但是以我的情况是我知道了了轮播图是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项目中创建一个功能丰富、外观吸引人的轮播图组件。记得根据你的具体需求调整样式和行为，以确保轮播图与你的应用设计保持一致。希望能获得大家的一个关注，谢谢！
❤️
🤹♀️潜意识起点：个人主页
🎙座右铭：得之坦然，失之淡然。
💎擅长领域：大前端
是的，我需要您的：
🧡点赞❤️关注💙收藏💛
是我持续下去的动力！
- 其他爆火文章：微信小程序完整笔记
