使用swiper实现图片预览效果

   <div class="swiper-container" id="zoomSwiper1"><div class="swiper-wrapper"><div class="swiper-slide" style="padding-bottom: 2px;"><div class="swiper-zoom-container"><img src="{{$img['picturePath']}}" width="100%"></div></div></div></div>

$(function(){var mySwiper = new Swiper('#zoomSwiper1', {lazy: true,observer:true,observeParents:true,centeredSlides:true,minRatio:0,on: {click: function(e){if(this.$el.hasClass('active')){this.$el.removeClass("active");this.zoom.out();this.zoom.disable();}else{this.$el.addClass("active");this.zoom.enable();}}}})
})

   #zoomSwiper1{width: 100%;}#zoomSwiper1 .swiper-slide {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}#zoomSwiper1 .swiper-slide img{width: 100%;height: auto;min-height: auto;}#zoomSwiper1.active{height: 100%;background: #000;position: fixed;z-index: 99;top: 0px;left: 0px;}#zoomSwiper1.active  #zoomSwiper1 .swiper-slide img{width: 100%;height: auto;min-height: auto;}#zoomSwiper1 .swiper-zoom-container{width: 100%;height:auto;}