swiper自定义寻呼机

时间：2023-03-31 12:21:49 CSS

问题：我不想使用swiper（4.5.1版）自带的圆形??按钮寻呼机。我需要自定义样式，分页器需要放在图片外面。解决方案：使用swiper提供的renderCustom()方法html文件

js文件varmySwiper=newSwiper('.swiper-container',{autoplay:{delay:3000,disableOnInteraction:false},分页:{el:'.swiper-pagination',type:'custom',renderCustom:function(swiper,current,total){varcustomPaginationHtml="";for(vari=0;i';}else{customPaginationHtml+='';}}返回customPaginationHtml；}},});cssfile.swiper-box{position:relative;边距：0auto;}.swiper-container{宽度：74vw;身高：34vw；margin-top:4vw;}.swiper-container.swiper-slideimg{width:100%;}.swiper-pagination{text-align:center;width:74vw;}.swiper-pagination-bullet{margin:4vw}/*包裹自定义分页的div样式*/.swiper-pagination-custom{bottom:-5vw;}.swiper-pagination-customs{background-图片：网址（../img/point-grey.png);/*未旋转图像的分页样式*/display:inline-block;背景重复：不重复；背景大小：包含；宽度：1.4vw；高度：1.4vw；margin-left:2vw;}/*自定义分页激活时的样式*/.swiper-pagination-customs-active{background-image:url(../img/point-green.png);}效果如下:

上一篇：如果你想做web前端，为什么我建议你先自学呢？

下一篇：Javascript新手实例3——仿手机聊天界面（ifelse应用）

swiper自定义寻呼机相关文章