#big-img-box {
        position: fixed;
        background: #000;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 140;
    }
    #big-img-box em {
        font-size: 24px;
        margin-top: 5%;
        display: block;
        color: #fff;
        width: 56px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
    }
    #big-img-box img{
        position: absolute;
        left: 50%;
        top: 45%;
        transform: translate(-50%,-50%);
        display: block;
        max-width: 100%;
        max-height: 52%;
    }
 

<div id="big-img-box" class="swiper-container d_none">
    <em> &lt; </em>
    <div class="swiper-wrapper">
        {{*<div class="swiper-slide"><img src=""></div>*}}
    </div>
    <div class="swiper-pagination"></div>
</div>

// swiper
    window.bigImgSwiper = new Swiper('#big-img-box', {
        pagination: "#big-img-box .swiper-pagination",
        paginationType: "progress",
        observer: true,
        observeParents: true
    });

    var BigImg = {
        wrapId: "#big-img-box",
        clickIndex: 0,
        closeBigImg: function () {
            // 隱藏大圖盒子
            $(this.wrapId).click(function () {
                $(this).hide();
            });
            // 阻止冒泡
            $(this.wrapId).on("click", "img", function (e) {
                e = e || event;
                e.stopPropagation();
            });
        },
        /**
         * 檢視大圖
         * @param smallImg      小圖的class或節點名
         * @param smallImgBox   小圖盒子的class或節點名
         * @param smallImgWrap  小圖盒子容器的class或節點名
         */
        showBigImg: function (smallImg, smallImgBox, smallImgWrap) {
            var self = this;
            $(smallImg).click(function () {
                // 當前點選的圖片索引
                self.clickIndex = $(this).parents(smallImgBox).index();
                // 當前盒子中的圖片路徑
                var src_arr = [];
                $(this).parents(smallImgWrap).find(smallImgBox).each(function () {
                    var maxsrc = $(this).find("img").attr("maxsrc");
                    var src = maxsrc ? maxsrc : $(this).find("img").attr("src");
                    src_arr.push(src);
                });
                // 初始化DOM結構
                self.initDom(src_arr);
            })
        },
        /**
         * 初始化DOM結構
         * @param src 存放src的陣列
         */
        initDom: function (src) {
            var slide = "<div class='swiper-slide'><img src=''></div>";
            var html = "";
            for(var i=0; i<src.length; i++){
                html += "<div class='swiper-slide'><img src='"+ src[i] +"'></div>";
            }
            $(this.wrapId).find(".swiper-wrapper").empty().append(html);
            // 顯示大圖片盒子
            this.showWrap();
        },
        /**
         * 顯示盒子，並重置swiper引數初始化
         *  activeIndex
         */
        showWrap: function () {
            // 定位到點選的圖片
            window.bigImgSwiper.activeIndex = this.clickIndex;
            $(this.wrapId).show();
        }
    };
    $(function () {
        BigImg.showBigImg(".js-small-img", ".js-small-img-item", ".js-samll-img-wrap");
        BigImg.closeBigImg();
    });
 

tips: 依賴於swiper外掛，請自行引入

效果圖見下：