手记

swiper插件的使用

1.按钮有效代码

 <div class="header_lunbottt swiper-onw">
        <ul class="header_ulrr swiper-wrapper">
	            <a class="swiper-slide" href="tel:4001058800"><li class="index_lb swiper-slide" >    
	            </li></a>
	            <a class="swiper-slide"  href="http://www.servoffice.com/servoffice-weixin//Art/ArtList?null"><li class="index_lb" >
	            </li></a>
        </ul>
        <div class="swiper-pagination" ></div>
    </div> 
    <script type="text/javascript">
    var swiper = new Swiper('.swiper-onw', {
		slidesPerView: 1,//一行显示4个
		slidesPerColumn: 1,//显示2行
		spaceBetween: 0,//轮播间距
		autoplay:3000,
		pagination: '.swiper-pagination',
	});
    </script>

2.按钮无效代码

 <div class="header_lunbottt swiper-onw">
        <ul class="header_ulrr swiper-wrapper">
        	
	            <a class="swiper-slide" href="tel:4001058800"><li class="index_lb swiper-slide" >
	                <!--<a class="index_bbs_btn" href="http://cs.ecqun.com/mobile/rand?id=690485">立即购买</a>-->
	                
	            </li></a>
	            <a class="swiper-slide"  href="http://www.servoffice.com/servoffice-weixin//Art/ArtList?null"><li class="index_lb" >
	                
	            </li></a>
	      
        </ul>
        <div class="swiper-button-prev"></div><!--左箭头-->
    	<div class="swiper-button-next"></div><!--右箭头-->
    </div> 
    <script type="text/javascript">
    var swiper = new Swiper('.swiper-onw', {
		slidesPerView: 1,//一行显示4个
		slidesPerColumn: 1,//显示2行
		spaceBetween: 0,//轮播间距
		autoplay:3000,
		 navigation: {
		      nextEl: '.swiper-button-next',
		      prevEl: '.swiper-button-prev',
		    },
	});
0人推荐
随时随地看视频
慕课网APP