swiper 笔记

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',//分页点
    paginationClickable: true, //点击按钮切换
    autoplay:'2000', //自动切换
//当显示隐藏swiper时会出现部分效果无效，这时需要加下面两个参数
    observer:true,/*启动动态检查器，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。*/
    observeParents:true,/*将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。*/

                    spaceBetween : -10,// 模块之间的间隔
		        centeredSlides: true, //居中
		        slidesPerView: 'auto', // slider能显示的slides数量
		        initialSlide: 1,//默认显示第几个slide
		         navigation: { //左右按钮
		          	nextEl: '.swiper-button-next',
		          	prevEl: '.swiper-button-prev',
		          },
 }); 

		<div class="picture" style="display: none;">
			<div class="swiper-container" >
				<p class="close">×</p>
			  <div class="swiper-wrapper">
			    <div class="swiper-slide"><img src="./images/1.jpg" alt="" class="swiper-img" /></div>
			    <div class="swiper-slide"><img src="./images/1.jpg" alt="" class="swiper-img"/></div>
			    <div class="swiper-slide"><img src="./images/1.jpg" alt="" class="swiper-img"/></div>
			    <div class="swiper-slide"><img src="./images/1.jpg" alt="" class="swiper-img"/></div>
			    <div class="swiper-slide"><img src="./images/1.jpg" alt="" class="swiper-img"/></div>
			  </div>
			
			</div>
			  <div class="swiper-pagination"></div>
		</div>