复习:引入和使用一个外部插件的流程
2022-06-22 jQuery如何引入和使用外部插件(以轮拨图插件OwlCarousel2为例)
swiper.js介绍和下载
swiper是一款免费以及轻量级轮播滑动的js框架,是非常常用的轮播库
官网地址:swiper中文网
下载:swiper-8.3.0.zip
在线演示和使用导航(必看)
引入文件和DOM结构
需要引入的css文件和js文件
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
...
<script src="dist/js/swiper-bundle.min.js"></script>
...
</body>
</html>
需要引入的DOM结构
注意class名不可以改变,但是可以起class别名(特别是页面中有多个轮拨图时)
<div class="swiper">
<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对象
var mySwiper = new Swiper('.swiper', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
// pagination: {
// el: '.swiper-pagination',
// },
// 如果需要前进后退按钮
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// },
// 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
});
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
<style>
.swiper {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./swiper/swiper-bundle.min.js"></script>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/1.jpg"></div>
<div class="swiper-slide"><img src="./img/7.jpg"></div>
<div class="swiper-slide"><img src="./img/3.jpg"></div>
<div class="swiper-slide"><img src="./img/4.jpg"></div>
<div class="swiper-slide"><img src="./img/5.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>
<script>
var mySwiper = new Swiper('.swiper', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
// pagination: {
// el: '.swiper-pagination',
// },
// 如果需要前进后退按钮
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// },
// 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
});
</script>
</body>
</html>
结果
略