移动端Swiper轮播图以及photoswipe的使用

1.Swiper轮播图

其实Swiper的文档非常友好，基本会一点前端语言都能看懂并且简单运用，这里我就说一些小的坑，重点还是在于和photoswipe的搭配使用。

1.版本

我引入的是swiper4，需要注意的是，你引入不同版本需要查看不同版本文档。swiper新版本并不会覆盖老版本写法。比如在初始化时
swiper4的写法为

	$(function() {
   
  		var myimgswiper = new Swiper('#imgswiper_home', {
   
        direction: 'horizontal',
        autoplay: {
   
          delay: 3000,
          disableOnInteraction: false,
        },
        loop: true,
         // 如果需要分页器
        pagination: {
   
          el: '.swiper-pagination',
        },
    });

swiper3：

var mySwiper = new Swiper ('.swiper-container', {
   
    direction: 'vertical',
    loop: true,
    
    // 如果需要分页器
    pagination: '.swiper-pagination',
    
    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
  })      

2.个别属性

1）用户操作swiper之后，是否禁止autoplay。
在用户自己滑动轮播图后，swiper的几个版本默认都是会停止自动播放
需要设置(这里我都用的Swiper4)：

	autoplay: {
   
       delay: 3000,//延迟3s
       disableOnInteraction: false,
    },

2）分页器

	pagination: {
   
       el: '.swiper-pagination',//你的分页器类名
    }

3）方向

 	direction: 'horizontal',

4)循环轮播

	loop: true,

示例图片：

2.photoswipe

首先能使用photoswipe，说明你的项目用不了Vue、react等热门的前端框架。如果你能用，拜托快去用他们的UI框架吧，你可以停止阅读了。
PhotoSwipe是一个图片放大插件，兼容pc和移动端，经历过多个版本的迭代且一直在不断更新，在移动端有着巨大的优势。
官网：http://photoswipe.com/
github：https://github.com/dimsemenov/photoswipe
使用：我是在GitHub上down下来，在页面引入了这四个文件
default-skin.css
photoswipe.css
photoswipe.js
photoswipe-ui-default.min.js
他们都在js/photoswipe文件夹下。
用法：

<div class="my-gallery" data-pswp-uid="1">
　　<figure>
           <a href="img/m3.jpg" data-size="670x712">
              <img src="img/th1.jpg">
           </a>
    </figure>
</div>

<!-- PhotoSwipe的根元素。必须有pswp。（放大后的元素结构）-->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- PhotoSwipe的背景。
		 它是一个单独的元素因为动画的不透明度比rgba()要快. -->
    <div class="pswp__bg"></div>

    <!-- 幻灯片 with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- 容纳幻灯片的容器。
			为了节省内存，PhotoSwipe在DOM中只保留了3个。
			不要修改这3个pswp剩余的项目元素，稍后再添加数据。 -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- 默认(PhotoSwipeUI_Default)界面在滑动区域的顶部。可以改变。 -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--