解决使用 swiper 常见的问题_综合

1.swiper插件使用方法, 直接查看文档
swiper API文档
2.swiper近视初始化时, 其父级元素处于隐藏状态(display:none),会导致swiper初始化失败, 页面中的滚动效果有问题

解决方法1: var mySwiper = myApp.swiper('.guest-wrapper',{
    observer: true,//修改swiper自己或子元素时，自动初始化swiperobserveParents: true//修改swiper的父元素时，自动初始化swiper});解决方法2: 
直接写死宽高var mySwiper = myApp.swiper('.guest-wrapper',{
    width:500,height:500});

3.swiper里面的图片懒加载与预加载, 可以使用自带的 lazyload 方法

设为true开启图片延迟加载默认值，使preloadImages无效。或者设置延迟加载选项。图片延迟加载：需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。
背景图延迟加载：载体增加属性data-background，并且增加类名swiper-lazy。还可以加一个预加载，<div class="swiper-lazy-preloader"></div>
或者白色的<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>当你设置了slidesPerView:'auto' 或者 slidesPerView > 1，还需要开启watchSlidesVisibility。var mySwiper = new Swiper('.swiper-container', {
    lazy: {
    loadPrevNext: true,},
});

4.想在轮播图外创建分页器、上一页和下一页的按钮(因为swiper的container默认overflow:hidden, 只能在轮播图中的可视区域显示切换菜单和上一页下一页)
独立分页元素，当启用（默认）并且分页元素的传入值为字符串时，swiper会优先查找子元素匹配这些元素。可应用于分页器，按钮和滚动条（pagination, prev/next buttons and scrollbar elements）。
当你的控制组件放在container外面的时候，需要用到。

var mySwiper = new Swiper('.swiper-container',{
    pagination : '.swiper-pagination',uniqueNavElements :false
})