Swiper写出带有标题和文字内容的slide且布局和自适应不受文字内容的影响
1.正常做出自适应的slide
2.把slide文字内容与分页器放在同一个盒子里,分页器 绝对定位(设置bottom) ,文字内容正常设置为block(靠文字内容撑开父盒子,且分页器可以一直居于最下方,并且文字换行不会影响整体布局)
3.使用swiper内置方法 slideChangeTransitionEnd 在初始化和切换时可以触发。并通过this.activeIndex获取到当前slid的下标
4.设置内容数组,将要展示的slide的Text内容提前保存到数组中
5.通过下标获取到对应要展示的slidtext的文字并通过js方法替换innerHtml,来达到视觉上的文字切换效果
如果标题文字过多,同理也可使用该方法写出复用性高的轮播图组件
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?