当前位置: 首页 > Web前端 > HTML5

解决swiper使用常见问题

时间:2023-04-05 16:44:04 HTML5

个人使用swiper过程中的总结1.swiper插件的使用方法,直接查看文档swiperbasicsdemoswiperAPI文档2.swiper近视初始化时,其父元素为hidden(display:none),会导致swiper初始化失败,页面滚动效果有问题解决方法一:varmySwiper=myApp.swiper('.guest-wrapper',{observer:true,//修改swiper时本身或子元素,都会自动初始化swiperobserveParents:true//当修改swiper的父元素时,自动初始化swiper});方案二:直接写宽高varmySwiper=myApp.swiper('.guest-wrapper',{width:500,height:500});3.scrolling插件嵌套在scrollingswiper插件中,要求子插件全部滚动完成后能够滚动父元素==(swiper4嵌套滚动)==//外层的父swiper层初始化窗口。window_swiper=newSwiper('.window_swiper_container',{speed:800,mousewheel:true,simulateTouch:false,nested:true,on:{onSlideChangeStart:function(swiper){//滑动父级需要激活滚轮事件swiper。enableMousewheelControl();}}});//内部子滑动器初始化(可用于多个子滑动器)varswiper=newSwiper('.{{ns}}-swiper',{simulateTouch:false,mousewheel:真,嵌套:真,关于:{slideChangeTransitionStart:function(){//这里禁止外滑动window.window_swiper.mousewheel.disable();},slideChangeTransitionEnd:function(){window.window_swiper.mousewheel.enable();}}});4.在swiper图片懒加载和预加载内部,可以使用内置的lazyload方法swiper4懒加载文档设置为true来启用图片懒加载的默认值,使preloadImages失效或者设置懒加载选项。图片延迟加载:需要将图片img标签的src重写为data-src,并添加类名swiper-lazy。背景图片的懒加载:给载体添加属性data-background,添加类名swiper-lazy。你还可以添加一个预加载器,

或者白色
如果你设置slidesPerView:'auto'或slidesPerView>1,您还需要启用watchSlidesVisibility。varmySwiper=newSwiper('.swiper-container',{lazy:{loadPrevNext:true,},});5.取消拖动最后一页或第一页时的空白状态resistanceRatio阻力率。边缘电阻的大小比例。值越小,阻力越大,越难将幻灯片拖离边缘。为0时,根本无法拖走。6、移动端顶部长菜单超隐藏长菜单,滚动开关超隐藏7、自由模式/抗反弹freeMode默认为false,普通模式:slide滑动时只滑动一个空格,并自动贴合wrapper,设置为true,变为free模式,slide会按照惯性滑动,不会贴合。8.末页高度小时切换(末页页脚不是全高页显示)varmySwiper=newSwiper('.swiper-container',{slidesPerView:2,//'auto'//slidesPerView:3.7,//如果设置为auto(比如全屏显示时的页脚部分),当键盘或鼠标滚动时,最后一张幻灯片可能会直接跳到倒数第三张幻灯片。//这时候可以手动设置activeIndex来解决,如下onTransitionEnd:function(swiper){if(swiper.progress==1){swiper.activeIndex=swiper.slides.length-1}}})9.Effects(switchingeffect)slide的切换效果,默认为"slide"(位移切换),可设置为"fade"(淡入)"cube"(方形)"coverflow"(3d流)"flip"(3d翻动)。10.内容滚动(ios下平滑滚动)//csshtml,body{position:relative;高度:100%;}body{背景:#fff;字体系列:HelveticaNeue、Helvetica、Arial、sans-serif;字体大小:14px;颜色:#000;保证金:0;填充:0;}.swiper-container{宽度:700px;高度:100%;}.swiper-slide{字体大小:18px;高度:自动;-webkit-box-sizing:边框框;框大小:边框框;填充:30px;字体大小:13px;字体系列:微软雅黑;行高:1.8;}p{margin-bottom:1em;}//html

无限内容无限内容无限内容无限内容无限内容

//jsvarswiper=newSwiper('.swiper-container',{scrollbar:'.swiper-scrollbar',//滚动条方向的类名:'vertical',//垂直排列slidesPerView:'auto',//可以同时显示多少张幻灯片mousewheelControl:true,//鼠标滚轮freeMode:true,//幻灯片是否贴合边roundLengths:true,//防止文字模糊});11.想在轮播外创建分页器,上一页和下一页按钮(因为swiper的容器默认是overflow:hidden,轮播可见区域只能显示切换菜单和上一页和下一页)独立pagination元素,当启用(默认)并且pagination元素的传入值为字符串时,swiper将首先查找与这些元素匹配的子元素,并且可以应用于分页器、按钮和滚动条。varmySwiper=newSwiper('.swiper-container',{pagination:'.swiper-pagination',uniqueNavElements:false,})点击查看swiper的API文档