當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

swiper轮播图插件

發(fā)布時間：2024/10/12 编程问答 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 swiper轮播图插件小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、簡介

①Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。Swiper能實現(xiàn)觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。

②Swiper 是一款免費以及輕量級的移動設(shè)備觸控滑塊的框架，使用硬件加速過渡（如果該設(shè)備支持的話）。主要使用與移動端的網(wǎng)站、網(wǎng)頁應(yīng)用程序（web apps），以及原生的應(yīng)用程序（native apps）。

③主要是為IOS而設(shè)計的，同時，在Android、WP8系統(tǒng)以及現(xiàn)代桌面瀏覽器也有著良好的用戶體驗。

二、文檔

①中文網(wǎng)址：http://2.swiper.com.cn/

②中文網(wǎng)地址：http://www.swiper.com.cn/

③Swiper目前有Swiper2、Swiper3、Swiper4幾個版本，每個版本的使用方法可能會有所不同，具體參照文檔

三、使用方法

①加載

首先加載插件，需要用到的文件有swiper.min.js和swiper.min.css文件。

如果你的頁面加載了jQuery.js或者zepto.js，你可以選擇使用更輕便的swiper.jquery.min.js

　　　 ...<link rel="stylesheet" href="path/to/swiper.min.css">...<script src="path/to/jquery.js"></script><script src="path/to/swiper.jquery.min.js"></script>

②HTML內(nèi)容

<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-scrollbar"></div> </div>

③初始化

初始化Swiper：最好是挨著</body>標簽（函數(shù)調(diào)用）

如果不能寫在HTML內(nèi)容的后面，則需要在頁面加載完成后再初始化

四、示例（輪播圖）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>輪播圖</title><link rel="stylesheet" href="swiper/css/swiper.min.css"><style>*{margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing: border-box;}ul{list-style: none;}a{text-decoration: none;}.container {position: relative;width: 750px;margin: 0 auto;} </style> </head> <body><div class="container"><div class="swiper-container"><ul class="swiper-wrapper"><li class="swiper-slide"><a href="#"><img src="images/banner01.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="images/banner02.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="images/banner03.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="images/banner04.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="images/banner05.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="images/banner06.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="images/banner07.jpg" alt=""></a></li><li class="swiper-slide"><a href="#"><img src="images/banner08.jpg" alt=""></a></li></ul><div class="swiper-pagination"></div></div></div><script src="swiper/js/swiper.min.js"></script><script>window.onload=function(){/* 輪播圖 */new Swiper('.swiper-container',{autoplay:1000,loop:true,pagination:'.swiper-pagination',autoplayDisableOnInteraction:false });}</script> </body> </html>

轉(zhuǎn)載于:https://www.cnblogs.com/EricZLin/p/9359415.html

總結(jié)

以上是生活随笔為你收集整理的swiper轮播图插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。