swiper 问题小结

var swiper = new Swiper(".mySwiper", {
            loop: true, // 无限循环
            spaceBetween: 40, // 在slide之间设置距离（单位px），默认是0
            slidesPerView: 1, // 设置slider容器能够同时显示的slides数量,默认是1。
            navigation: {
                nextEl: ".swiper-button-next", // 右边切换按钮
                prevEl: ".swiper-button-prev" // 左边切换按钮
              },
            initialSlide: initialSlide, // 默认展示点击的图片
            autoplay: false, // 自动播放
            grabCursor: true, // 抓手形状
            observer:true, // 修改swiper自己或子元素时，自动初始化swiper
            observeParents:true // 修改swiper的父元素时，自动初始化swiper
       })

修改swiper内部样式后，初始化左右切换无反应 如下设置即可

observer:true, // 修改swiper自己或子元素时，自动初始化swiper
observeParents:true // 修改swiper的父元素时，自动初始化swiper

修改左右切换按钮样式，自定义图片

/*去掉默认样式*/
.picture-preview .swiper-button-prev:after, .picture-preview .swiper-button-next:after{
    display: none;
}
/*自定义样式*/
.picture-preview .swiper-button-prev{
    width: 24px;
    height: 24px;
    background: url('../../images/house/icon_left.png') no-repeat center;
    background-size: 100%;
    left: 64px;
}
.picture-preview .swiper-button-next{
    width: 24px;
    height: 24px;
    background:url('../../images/house/icon_right.png') no-repeat center;
    background-size: 100%;
    right: 64px;
}