Swiper写出带有标题和文字内容的slide且布局和自适应不受文字内容的影响

1.正常做出自适应的slide

2.把slide文字内容与分页器放在同一个盒子里,分页器 绝对定位(设置bottom) ,文字内容正常设置为block(靠文字内容撑开父盒子,且分页器可以一直居于最下方,并且文字换行不会影响整体布局)

3.使用swiper内置方法 slideChangeTransitionEnd 在初始化和切换时可以触发。并通过this.activeIndex获取到当前slid的下标

4.设置内容数组,将要展示的slide的Text内容提前保存到数组中

5.通过下标获取到对应要展示的slidtext的文字并通过js方法替换innerHtml,来达到视觉上的文字切换效果

如果标题文字过多,同理也可使用该方法写出复用性高的轮播图组件

 

posted @   SimoonJia  阅读(783)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示