swiper基本使用

最新推荐文章于 2024-06-17 11:44:33 发布

林之.

最新推荐文章于 2024-06-17 11:44:33 发布

阅读量904

点赞数

分类专栏： vue项目 swiper 文章标签：前端

本文链接：https://blog.csdn.net/m0_51144154/article/details/122156102

版权

vue项目同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

swiper

1 篇文章 0 订阅

订阅专栏

swiper基本使用

第一步官方下载swiper压缩包
第二步取js 和 css 代码来示例
在这里插入图片描述

第三步：引入官方配置相应代码

<!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="./css/swiper.min.css">
    <script src="js/swiper.min.js"></script>
    <style>
        .swiper {
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body>
    <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>

</body>
<script>
    // 下面这个脚本是对上面的页面结构进行动态操作
    // 在new Swiper之前，页面中的结构必须有
    var mySwiper = new Swiper('.swiper', {

        loop: true, // 循环模式选项

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

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

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

</html>

注意：
第一步：引包(相应js|css)
第二步：页面结构务必要有
第三步： new Swiper实例 (为轮播图添加动态效果)

林之.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
swiper基本使用

swiper基本使用第一步官方下载swiper压缩包第二步取js 和 css 代码来示例第三步：引入官方配置相应代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
复制链接

扫一扫

专栏目录