使用Swiper插件

使用Swiper插件制作轮播图

一、官网下载Swiper文档

Swiper中文网:https://www.swiper.com.cn

也可以不下载,在官网查看想要的样式,右击查看页面源代码,点击代码中引用的css与js文件可以跳转到代码页面,复制到文件中即可。

二、引入css,js文件

    <!-- 引入swiper css文件-->
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <!-- 引入swiper js文件 -->
    <script src="js/swiper-bundle.min.js"></script>
    <!-- 先引入swiper js文件再引入index js -->
    <script src="js/index.js"></script>

一定要先引入Swiper里面的js文件,再引入index.js。

(注意引入css文件是用<link>,引入js文件是用<script>)

三、复制html结构,复制css样式,复制js

① 复制html(不要更改里面的结构和类名

② 复制css

③ 复制js

放到index.js里面

// 页面加载完再执行
window.addEventListener('load', function () {
    // 复制的js代码
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值