swiper组件使用

最新推荐文章于 2024-07-29 17:01:32 发布

一只小虾米~~

最新推荐文章于 2024-07-29 17:01:32 发布

阅读量409

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_43930256/article/details/127977416

版权

本文介绍了如何使用Swiper组件创建轮播图，包括引入资源文件、设置HTML结构、编写JS控制代码，实现自动轮播和分页器点击跳转功能。

摘要由CSDN通过智能技术生成

1、下载swiper-bundle.min.js和swiper-bundle.min.css文件并引入页面。

<link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <script src="./js/swiper-bundle.min.js"></script>

2、在body中写入swiper结构(包括轮播部分，分页器、导航按钮)并添加轮播图片。

<div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="http://p1.music.126.net/ksFEnERjz4dyuN4mlJaw-Q==/109951168077413066.jpg?imageView&quality=89" alt=""></div>
            <div class="swiper-slide"><img src="http://p1.music.126.net/fMDEzHiQLN6cnKuUWMoOFQ==/109951168077534035.jpg?imageView&quality=89" alt=""></div>
            <div class="swiper-slide"><img src="http://p