关于swiper轮播图的实际应用

//HTML代码
<div id="main_top">
				<div class="swiper-container">
				    <div class="swiper-wrapper">   	
				    </div>
				    <!-- Add Pagination -->
				    <div class="swiper-pagination"></div>
				 </div>
		</div>
//css
html, body {
		      position: relative;
		      height: 100%;
		    }
		    body {
		      background: #eee;
		      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		      font-size: 14px;
		      color:#000;
		      margin: 0;
		      padding: 0;
		    }
		    .swiper-container {
		      width: 100%;
		      height: 100%;
		    }
		    .swiper-slide {
		      text-align: center;
		      font-size: 18px;
		      background: #fff;
		      width:100%;
		     height: 100%;
		      /* Center slide text vertically */
		      display: -webkit-box;
		      display: -ms-flexbox;
		      display: -webkit-flex;
		      display: flex;
		      -webkit-box-pack: center;
		      -ms-flex-pack: center;
		      -webkit-justify-content: center;
		      justify-content: center;
		      -webkit-box-align: center;
		      -ms-flex-align: center;
		      -webkit-align-items: center;
		      align-items: center;
		    }
		    .swiper-slide a,
		    .swiper-slide a img{
		    	width:100%;
		    	height: 100%;
		    	display: block;
		    }

接下来就是最受期待的js代码了。

$(function() {		
	          //从后台请求图片资源
				var lms = tils.common.magesLm.xxxxxx; // 获取栏目
				$.ajax({
					type:'get',
					url:'top/imageList.do',
					dataType:"json",
					data:{
						lm:3032,  //栏目
						cp:'1',     //当前页数
						ps:'20'   //获取条数
					},
					success: function(data){
						let $parent =  $('.swiper-wrapper');  
						var len = data.list.length;				
						for(let i = 0; i < len; i++){                 //获取后台的图片并遍历创建标签添加到页面
							let $slide = $('<div class="swiper-slide"></div>');
							let $img = $('<img src=""  />');
							$img.attr('src',data.list[i].picUrl)
							$img.addClass('main_top_img');
							$img.appendTo($slide)
							$parent.append($slide);
						}

//                  swiper轮播
	            var swiper = new Swiper('.swiper-container', {
			 	    direction : 'horizontal',
			 	    loop : true,   //循环
				    	autoplay: {      //自动切换
						    delay: 3000,
						    stopOnLastSlide: false,
						    disableOnInteraction: false,
						    },  
			    	observer:true,//修改swiper自己或子元素时，自动初始化swiper
					observeParents:true,//修改swiper的父元素时，自动初始化swiper
			        pagination: {       //分页器
			        el: '.swiper-pagination',
			          },
			        })
	            			//如果swiper只有一张图片，不能够滑动它
		         if($(".swiper-container .swiper-slide").length <= 3) {
		         	swiper.destroy(false);
		         	$('.swiper-slide a').attr("href","javascript:;")
		         }
		         //    如果a标签href为空，取消点击效果
						$parent.children(".swiper-slide").each(function(index,el){	
							let $el = $(el).children('a');
							if($el.attr("href") == ''){
								$el.attr("href","javascript:;");
							} 
		})
	            
				},
					error:function(err){
						console.log(err)
					}
					
				})
		
		
			        
			});