手機端滑動外掛swiper3.x的使用示例
阿新 • • 發佈：2019-01-02
1 相容性ie9勉強相容
2 http://www.swiper.com.cn/api/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <link rel="stylesheet" href="css/swiper.min.css"> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/swiper.jquery.min.js"></script> <style> * {margin: 0; padding: 0;} body,html {width: 100%; height: 100%;} .div1 {width: 80%; overflow: hidden; height: 50%; position: relative; margin: 0 auto;} .parallax-bg {width: 100%; height: 100%; background: url(images/p.jpg) no-repeat center; position: absolute;} .swiper-slide {box-sizing: border-box; height: 100%;} .a {border: 25px solid red;} .b {border: 25px solid blue;} .c {border: 25px solid green;} .d {border: 25px solid yellow;} .e {border: 25px solid purple;} .f {border: 25px solid black;} .g {border: 25px solid pink;} .h {border: 25px solid grey;} /*自定義分頁器樣式*/ .swiper-pagination i {padding: 20px;} .swiper-pagination-bullet {background: red;} .swiper-pagination-bullet-active {background: blue;} /*更改前後按鈕的大小*/ .swiper-button-prev {width: 80px; height: 80px; background-size: 80px 80px;} </style> </head> <body> <div class="div1"> <div class="parallax-bg" data-swiper-parallax="20%"></div> <div class="swiper-wrapper"> <div class="swiper-slide a">01<img src="images/p.jpg"></div> <div class="swiper-slide b">02<img src="images/p.jpg"></div> <div class="swiper-slide c">03<img src="images/p.jpg"></div> <div class="swiper-slide d">04<img src="images/p.jpg"></div> <div class="swiper-slide e">05<img src="images/p.jpg"></div> <div class="swiper-slide f">06<img src="images/p.jpg"></div> <div class="swiper-slide g">07<img src="images/p.jpg"></div> <div class="swiper-slide h">08<img src="images/p.jpg"></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 前後按鈕的顏色更改 <div class="swiper-button-next swiper-button-white"></div> <div class="swiper-button-next swiper-button-black"></div> 前後按鈕的顏色更改 --> <div class="swiper-scrollbar"></div> </div> <div> 一些事件 <p class="prevPage">上一頁</p> <p class="nextPage">下一頁</p> <p class="pointPage">切換到指定頁</p> </div> <script> $(function() { //swiper3.x 基本引數 var pageTxt = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];//自定義分頁器中的文字 var swiper = new Swiper('.div1', {//也可以用預設的類名swiper-container autoplay: 2000,//自動滑動，操作後停止 autoplayDisableOnInteraction: false,//操作後是否停止自動滑動 initialSlide: 1,//第一張顯示的下標 //direction: 'vertical',//垂直方向 grabCursor: true,//改變滑鼠形狀 parallax: true,//視差滾動，需設定absolute slidesPerView: 3,//一次顯示張數 //spaceBetween: 40,//每兩張間隔 //slidesPerGroup: 2,//每次最少滑動張數 //slidesPerColumn: 2,//每列顯示的張數 /*breakpoints: {//響應式 480: { slidesPerView: 1, spaceBetween: 10, }, 680: { slidesPerView: 2, spaceBetween: 20, }, },*/ freeMode: true,//是否自由滑動 freeModeSticky: true,//自由活動下也能貼合邊緣 //effect: 'cube',//各瀏覽器處理不一樣，慎用,ie9-支援不好 slide fade cube coverflow flip pagination: '.swiper-pagination',//分頁器,類名最好別變 paginationType: 'bullets',//分頁器的樣式 bullets fraction progress custom paginationClickable: true,//分頁器是否可點 paginationBulletRender: function(index, className) {//改變分頁器的結構 return '<i class="'+ className +'">'+ pageTxt[index] +'</i>' }, prevButton: '.swiper-button-prev',//不要忘記點 nextButton: '.swiper-button-next', scrollbar: '.swiper-scrollbar',//滾動條 scrollbarDragggable: true,//是否可拖動 keyboardControl: true,//鍵盤控制切換 mousewheelControl: true,//滾輪控制切換 loop: true,//無縫滑動 onInit: function(swiper) { console.log('初始化完成'); }, onTouchStart: function(swiper) { console.log('觸碰到'); }, onTouchMove: function(swiper) { console.log('滑動中'); }, onTouchEnd: function(swiper) { console.log('釋放'); }, onSlideChangeStart: function(swiper) { console.log('執行切換剛開始'); }, onSlideChangeEnd: function(swiper) { console.log('執行切換剛結束'); }, onClick: function(swiper) { console.log('點選'); }, }); //上一頁 $('.prevPage').on('click', function() { swiper.slidePrev(); }); //下一頁 $('.nextPage').on('click', function() { swiper.slideNext(); }); //指定頁 $('.pointPage').on('click', function() { swiper.slideTo(4); }); }); </script> </body> </html>