swiper是一款輕量級的輪播圖插件,不僅支援pc端更是為行動端而生,用它可以快速地做出一個輪播圖,或者擴展使其做出複雜的輪播效果。
swiper使用需要兩個文件,一個是swiper.css,裡面規定了一些在這個滑動輪播插件中常用的樣式,當然如果你願意的話可以自己定義樣式
另外一個是swiper.js這個是外掛程式的主體部分。
在頁面中引入這兩個檔案之後首先要寫基本的html結構
下面所有的使用方式基於swiper 4.x
<p class="swiper-container"> <p class="swiper-wrapper"> <p class="swiper-slide">Slide 1</p> <p class="swiper-slide">Slide 2</p> <p class="swiper-slide">Slide 3</p> <p class="swiper-slide">Slide 4</p> <p class="swiper-slide">Slide 5</p> <p class="swiper-slide">Slide 6</p> <p class="swiper-slide">Slide 7</p> <p class="swiper-slide">Slide 8</p> <p class="swiper-slide">Slide 9</p> <p class="swiper-slide">Slide 10</p> </p> </p>
類別名為swiper-container 是滑動輪播插件的包裹器,類似於mask,一個窗口,swiper-wrapper是一個按照一定順序排列的所有輪播圖的集合,在默認情況下是左右排列,當滑鼠或觸控螢幕進行操作的時候,改變的是這個元素的位置,而達到輪播的效果。 swiper-slide則是每個輪播圖元素,在寫好基本html結構之後,需要對這個輪播圖進行初始化
<script> var swiper = new Swiper('.swiper-container');</script>
這樣就能產生一個預設的輪播圖,可以用滑鼠或者觸控螢幕來進行左右的滑動
大部分的輪播圖都有分頁,導航,可以讓使用者看到目前是在什麼位置,並且讓使用者知道這是一個可以互動的部分,添加分頁的方式也很簡單,只需要在初始化的時候添加選項指定一下分頁的元素就行
html部分,在swiper-container下面添加下一個與上一個按鈕
<p class="swiper-container"> <p class="swiper-wrapper">...</p> <p class="swiper-button-next"></p> <p class="swiper-button-prev"></p> </p>
在這裡swiper-button-next和swiper-button-prev都是指定好的按鈕,下一個按鈕會垂直居中並且靠右邊,上一個按鈕會垂直居中靠右邊,當然也能自己指定按鈕。
var swiper = new Swiper('.swiper-container',{ navigation:{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } });
在初始化函數中新增按鈕元素。
這樣就能產生一個有導覽按鈕的輪播圖了
#新增分頁的方式和導覽按鈕非常類似
html:
<p class="swiper-container"> <p class="swiper-wrapper"> ... </p> <!-- 分页 --> <p class="swiper-pagination"></p> <!--导航按钮--> <p class="swiper-button-next"></p> <p class="swiper-button-prev"></p> </p>
在初始化的時候加入分頁元素
js:
var swiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', }, navigation:{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } });
這樣就能產生有分頁又有導航的輪播圖了
js:
在初始化的時候加入
var swiper = new Swiper('.swiper-container', { //分页 pagination: { el: '.swiper-pagination', }, //导航按钮 navigation:{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, //自动轮播 autoplay: { delay: 2500,//时间 毫秒 disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true }, });
var swiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', type: 'progressbar',//将分页的类型改为进度条就行 }, navigation:{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, autoplay: { delay: 2500, disableOnInteraction: false, }, });
以上是swiper的基本使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!