swiper的基本使用

不~困

已于 2022-08-25 07:12:48 修改

阅读量659

点赞数

分类专栏：网页设计与制作文章标签： javascript 前端 html

于 2022-08-13 06:46:56 首次发布

本文链接：https://blog.csdn.net/qq_45803094/article/details/126311924

版权

网页设计与制作专栏收录该内容

1 篇文章

订阅专栏

官方文档：https://www.swiper.com.cn/api/index.html

在这里插入图片描述
下载完成之后解压，将文件夹中的css和js文件夹复制到你所需要使用swiper的项目中

使用步骤

Swiper使用方法

1.首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件

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

2.添加HTML内容。Swiper7的默认容器是’.swiper’，Swiper6之前是’.`swiper-container`’。

    <div class="swiper-container">
        <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>

3.你可能想要给Swiper定义一个大小，当然不要也行。

	<style>
        .swiper-container {
            width: 600px;
            height: 300px;
        }
    </style>

4.初始化Swiper。（前提是页面中已经有了结构）

new Swiper实例【轮播图添加动态效果】
第一个参数：可以是字符串也可以是真实的DOM

 var mySwiper = new Swiper(document.querySelector('.swiper-container'), {
//var mySwiper = new Swiper('.swiper-container', {

<script>
    // 当页面中的已经有了的情况下，你再初始化swiper实例
    var mySwiper = new Swiper('.swiper-container', {
        //direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        // scrollbar: {
        //     el: '.swiper-scrollbar',
        // },
    })        
</script>

完整代码：

<!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>Swiper基本使用</title>
    <!-- 引包 -->
    <script src="./js/swiper.min.js"></script>
    <link rel="stylesheet" href="./css/swiper.min.css">
    <style>
        .swiper-container {
            width: 600px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="swiper-container">
        <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>
</body>

</html>
<script>
    // 当页面中的已经有了的情况下，你在初始化swiper实例
    var mySwiper = new Swiper('.swiper-container', {
        //direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable:true//点击小球也可以换页
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        // scrollbar: {
        //     el: '.swiper-scrollbar',
        // },
    })        
</script>