极客教程如何使用Swiper.js插件设计移动触摸滑块
在这篇文章中，我们将学习如何使用JavaScript Swiper插件为移动应用、移动网站或Web应用设计移动触摸滑块。
步骤:
- 从这个链接中下载所需的预编译文件，并将其保存在你的工作文件夹中，以便执行以下例子。
- 将下载的文件 “swiper.min.js “和 “swiper.min.css “放在工作文件夹的根目录下，以便下面的例子能够工作。
- 否则，在你下面的示例代码中使用下面给出的CDN链接。
- 在HTML文档中设计具有 “swiper-container “类的div元素，该元素包含用于滑动的 “swiper-slide “类图像的div元素。
- 使用HTML
src属性来上传图片。
- 在代码的脚本部分，使用插件初始化swiper()方法。根据应用程序的需要，设置不同的选项。
- 在代码的样式部分，我们使用了嵌入式样式来设计HTML元素，其类别为 “swiper-container “和 “swiper-slide “以及body元素。
- 参照不同的CSS显示属性来实现。
CDN 链接:
<link rel=”stylesheet” href=”https://unpkg.com/swiper@7/swiper-bundle.min.css” />
<script src=”http://code.jquery.com/jquery-1.9.1.min.js”> </script>
<script src=”https://unpkg.com/swiper@7/swiper-bundle.min.js”></script>
例子1： 以下例子演示了一个使用Swiper插件的基本滑块。该插件的其他属性也可以根据需要进行设置。该页面设计有HTML div元素，并带有该插件的类，即 “swiper-container”、”swiper-wrapper”、”swiper-slide”、”swiper-pagination “和其他类。使用HTML img元素为滑块插入各种图片。滑块在下面代码的脚本部分通过选项设置进行初始化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Implementing Swiper</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href=
"https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<script src=
"http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script src=
"https://unpkg.com/swiper@7/swiper-bundle.min.js">
</script>
<!-- Styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
body {
font-family: Helvetica Neue;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
background: #fff;
display: -ms-flexbox;
display: -webkit-flex;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190050/background1.jpg">
</div>
<div class="swiper-slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190136/background2.jpg">
</div>
<div class="swiper-slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190200/background3.jpg">
</div>
<div class="swiper-slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190222/background4.jpg">
</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>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
}
});
</script>
</body>
</html>
输出:
例子2：在下面的例子中，我们只是在上述HTML代码的脚本部分改变或调整属性的选项值。开发者可以根据应用的需要来改变或增加。两个幻灯片同时可见，在滑块的顶部和底部有一个进度条。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Implementing Swiper</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href=
"https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<script src=
"http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script src=
"https://unpkg.com/swiper@7/swiper-bundle.min.js">
</script>
<!-- Styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
body {
font-family: Helvetica Neue;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
background: #fff;
display: -ms-flexbox;
display: -webkit-flex;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190050/background1.jpg">
</div>
<div class="swiper-slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190136/background2.jpg">
</div>
<div class="swiper-slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190200/background3.jpg">
</div>
<div class="swiper-slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190222/background4.jpg">
</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>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 2,
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
type: 'progressbar',
slidesPerView: 'auto',
initialSlide: 1,
resistanceRatio: 0,
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
mousewheel: true,
});
</script>
</body>
</html>
输出:
