最好的移動觸摸滑動插件：Swiper

時間 2019-11-20

標籤最好移動觸摸滑動插件 swiper 欄目無線简体版

原文原文鏈接

最近在使用的一個移動觸摸滑動插件Swiper，功能很強大，跟以前的那個swipe.JS相比，同時支持在PC端滑動，支持上下方向滑動，支持多張圖片滑動，支持多屏滑動，凡是你想獲得的幾乎均可以實現。最近做者還更新了3.0版本，優先支持ios和最新版的Android移動端。javascript

下載代碼

能夠在github上下載：https://github.com/nolimits4web/Swiper/css

或者有bower的，直接安裝 $ bower install swiperhtml

使用方法

swiper支持純js和jQuery兩種方式java

<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
...
<script src="path/to/swiper.min.js"></script>
</body>
</html>

jQuery方式jquery

<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
...
<script src="path/to/jquery.js"></script>
<script src="path/to/swiper.jquery.min.js"></script>
</body>
</html>

html代碼android

<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>

<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>

CSS代碼ios

.swiper-container { width: 600px; height: 300px; }

js代碼git

<script>
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,

// If we need pagination
pagination: '.swiper-pagination',

// Navigation arrows
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',

// And if we need scrollbar
scrollbar: '.swiper-scrollbar',
})
</script>

jQuery代碼github

$(document).ready(function () {

//initialize swiper when document ready
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true
})
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。