swiper.js + jquery.magnific-popup.js 实现奇葩的轮播需要

奇葩的轮播图

说轮播图很简单的，一定是没有遇到厉害的产品。

---

先说需求：
首先，一个mask会有三张图片，点击左右按钮会左右滑动一张图片的宽度。
点击展示的三张图片的任意一张，弹出遮罩，显示该图片的放大样式，并支持左右箭头的点击，类似一个新的轮播图。

轮播的插件

找了很久都没有找到一个合适的插件，如果自己书写，无疑会花费更多的时间，故采取一个折中的方案，用两个轮播插件实现需求。

一个插件实现左右滚动的效过，一个插件弹出的左右效果。

插件如下:

jquery.magnific-popup.js
swiper.min.js

配置说明

html结构

 <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="./1.jpg" data-source="./1.jpg" style="width:100%;">
                    <img src="./1.jpg" width="100%">
                </a>
        </div>
        <div class="swiper-slide">
            <a href="./4.jpg" data-source="./4.jpg" style="width:100%;">
                    <img src="./4.jpg" width="100%">
                </a>
        </div>
        <div class="swiper-slide">
            <a href="./4.jpg" data-source="./4.jpg" style="width:100%;">
                    <img src="./4.jpg" width="100%">
                </a>
        </div>
        <div class="swiper-slide">
            <a href="./4.jpg" data-source="./4.jpg" style="width:100%;">
                    <img src="./4.jpg" width="100%">
                </a>
        </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

私有css样式

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}
.swiper-container a {
    display: inline-block;
}
body {
    margin: 0;
    padding: 0;
}

相关js的配置

var swiper = new Swiper('.swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    slidesPerView: 3,
    centeredSlides: false,
    spaceBetween: 0,
});
$('.swiper-wrapper').magnificPopup({
    delegate: 'a',
    type: 'image',
    closeOnContentClick: false,
    closeBtnInside: false,
    mainClass: 'mfp-with-zoom mfp-img-mobile',
    gallery: {
        enabled: true
    },
    zoom: {
        enabled: true,
        duration: 300,
        opener: function (element) {
            return element.find('img');
        }
    }
});

注意：当设置swiper配置项目为循环播放的时候，会导致插件magnificPopup的图片数量增加。

很多的实现循环播放的插件都会至少增加图片栈的最前与最后的一张图片，以在视觉上显示无线循环的假象，当前这种技术是基于定时器动画才有的限制。

当采用css3显示的轮播图，通过淡入淡出，可以不用增加图片的数量，来完成无限轮播。

more

magnific-Popup github地址

swiper 中文网地址