首页>>焦点图>>Swiper制作网易智造首页响应式全屏宽度幻灯片(2019-05-28)

Swiper制作网易智造首页响应式全屏宽度幻灯片

 和网易智造一样的效果

Swiper制作网易智造首页响应式全屏宽度幻灯片
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 XML/HTML Code

  1. <div class="swiper-container">  
  2.        <div class="swiper-wrapper">  
  3.            <div class="swiper-slide">  
  4.                <img data-src="images/1.jpg" class="swiper-lazy" alt="">  
  5.            </div>  
  6.            <div class="swiper-slide">  
  7.                <img data-src="images/2.jpg" class="swiper-lazy" alt="">  
  8.            </div>  
  9.              
  10.        </div>  
  11.        <div class="swiper-pagination"></div>  
  12.        <span class="swiper-button-next"></span>  
  13.        <span class="swiper-button-prev"></span>  
  14.    </div>  

 

 

JavaScript Code
  1. $(function () {  
  2.     var mySwiper = new Swiper('.swiper-container', {  
  3.         effect: 'fade',  
  4.         autoplay: true,  
  5.         loop: true,  
  6.         pagination: {  
  7.             el: '.swiper-pagination',  
  8.             clickable: true  
  9.         },  
  10.         navigation: {  
  11.             nextEl: '.swiper-button-next',  
  12.             prevEl: '.swiper-button-prev'  
  13.         },  
  14.         lazy: {  
  15.             loadPrevNext: true  
  16.         }  
  17.     })  
  18. })  

 


原文地址:http://www.freejs.net/article_jiaodiantu_780.html