本文介绍了如何引入和使用swiper.js，一个流行的JavaScript轮播库。首先回顾了外部插件引入的一般流程，接着详细讲解了swiper.js的下载、在线演示及使用导航。文章还阐述了需要引入的CSS和JS文件，以及构建必要的DOM结构，并强调了初始化swiper对象的步骤。最后，提供了完整代码以供参考。
复习:引入和使用一个外部插件的流程
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
最低0.47元/天 解锁文章
扫一扫
5376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
