swiper 弹出图片_Swiper实现图片预览效果

作者：娇娇jojo

日期：2018年3月13日

一、介绍

先用几张图来和大家描述一下什么是图片预览效果吧。

第一张图：

第二张图：

第三张图：

第四张图：

图一：图片列表；

图二：点击列表中 “小猫” 这张图片，会弹出图二这样的预览图；

图三：对图二向左或向右滑动会出现图三的样子，滑动的距离和区域小于某个值时，图片还是会回到当前这张图，超过某个值了，就会滑到上一张图或下一张图；

图四：对图二，向左滑动，并且超出界定的值了，滑到了 “小猫” 的下一张图片 “大海”。

二、实现

实现起来其实很简单，就是用Swiper，下面直接贴代码，我用的是Swiper4 。

1、HTML

照片预览

2、LESS

body,

div,

p,

h1,

h2,

h3,

h4,

h5,

h6,

p,

ul,

ol,

li {

margin: 0;

padding: 0;

list-style: none;

}

body {

padding-top: constant(safe-area-inset-top);

padding-left: constant(safe-area-inset-left);

padding-right: constant(safe-area-inset-right);

padding-bottom: constant(safe-area-inset-bottom);

}

img {

display: block;

border: 0;

width: 100%;

}

.translateZ(@status) {

transform: translateZ(@status);

-webkit-transform: translateZ(@status);

-moz-transform: translateZ(@status);

-o-transform: translateZ(@status);

}

.flex {

display: -moz-box;

display: -ms-flexbox;

display: -webkit-box;

display: flex;

display: -webkit-flex;

display: box;

}

.align-items(@status) {

align-items: @status;

-webkit-align-items: @status;

-moz-align-items: @status;

-ms-align-items: @status;

-o-align-items: @status;

-webkit-box-align: @status;

}

.flex-wrap(@status) {

flex-wrap: @status;

-webkit-flex-wr