Swiper基本使用方法

最新推荐文章于 2024-08-19 12:12:08 发布
最新推荐文章于 2024-08-19 12:12:08 发布
阅读量2.9k 收藏 4
点赞数
分类专栏： Swiper 文章标签： Swiper
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NextLove_1015/article/details/54376168
版权

要用Swiper 则先需要插件
需要用到的文件有 swiper.min.js 和 swiper.min.css 文件。

自适应全屏+分页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="./css/swiper.min.css">

    <!-- Demo styles -->
    <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    </style>
</head>
<body>
    <!-- Swiper -->
    <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 class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="../lib/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true
    });
    </script>
</body>
</html>


垂直方向自适应全屏+分页


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">


    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../dist/css/swiper.min.css">


    <!-- Demo styles -->
    <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;


        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    </style>
</head>
<body>
    <!-- Swiper -->
    <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 class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>


    <!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>


    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical'
    });
    </script>
</body>
</html>




视差效果



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">


    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../dist/css/swiper.min.css">


    <!-- Demo styles -->
    <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        background: #000;
    }
    .swiper-slide {
        font-size: 18px;
        color:#fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 40px 60px;
    }
    .parallax-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 130%;
        height: 100%;
        -webkit-background-size: cover;
        background-size: cover;
        background-position: center;
    }
    .swiper-slide .title {
        font-size: 41px;
        font-weight: 300;
    }
    .swiper-slide .subtitle {
        font-size: 21px;
    }
    .swiper-slide .text {
        font-size: 14px;
        max-width: 400px;
        line-height: 1.3;
    }
    
    </style>
</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="parallax-bg" style="background-image:url(img/Parallax.jpg)" data-swiper-parallax="-23%"></div>
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="title" data-swiper-parallax="-100">Slide 1</div>
                <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
                <div class="text" data-swiper-parallax="-300">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="title" data-swiper-parallax="-100">Slide 2</div>
                <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
                <div class="text" data-swiper-parallax="-300">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="title" data-swiper-parallax="-100">Slide 3</div>
                <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
                <div class="text" data-swiper-parallax="-300">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
                </div>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-white"></div>
        <!-- Add Navigation -->
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
    </div>


    <!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>


    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        parallax: true,
        speed: 600,
    });
    </script>
</body>
</html>



NextLove_1015
关注
专栏目录
关于swiper的使用方法
ff_717的博客
03-14 960
关于swiper的安装和使用
Swiper使用方法
05-11 137
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .swiper-...
终于可以不用 swiper.js 了！
最新发布
程序员成长指北
08-19 172
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群几乎每个前端开发都应该用过这个滑动组件库吧？这就是大名鼎鼎的swiper.js没想到已经出到 11 个大版本了https://www.swiper.com.cn/当然我也不例外，确实非常全面，也非常强大。不过很多时候，我们可能只用到了它的10%不到的功能，显然是不划算的，也会有性能方面的顾虑。...
swiper的使用教程
qq_39430589的博客
10-16 7658
swiper的使用教程 今天要分享的是swiper这个插件的使用，什么是swiper呢？ Swiper常用于移动端网站的内容触摸滑动； Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 初学者使用swiper的时候，可以在官网（http://www.swiper.com.cn/）学，但是一开始的时候，建议不要直接看它的API文档
swiper插件如何使用？
qq_57193827的博客
07-29 3669
js中swiper插件的使用
完全指南：如何使用 Swiper 插件实现强大的轮播效果
阿猫故乡的博客
12-04 8906
使用 Swiper 插件有以下好处：简单易用：Swiper 核心库提供了丰富的 API 供使用者随意配置，同时支持自定义事件和回调函数，使得使用起来非常方便。多种轮播效果：Swiper 支持多种轮播效果，如滑动、淡入淡出等，且易于定制。高性能：Swiper 对于移动端设备做了很好的兼容性处理，通过 CSS3 实现动画，使得页面流畅、响应迅速。支持响应式布局：Swiper 提供了响应式布局解决方案，可以轻松适配不同尺寸设备并保持良好的用户体验。
react-native封装插件swiper的使用方法
11-26
在使用react-native-swiper之前，首先确保你已经创建了一个基本的React Native项目。通过命令行工具，你可以使用`react-native init swiper`创建一个新的项目。接下来，你需要在项目中安装`react-native-swiper`依赖...
swiper自定义分页器使用方法详解
08-28
swiper自定义分页器使用方法详解 swiper是一款流行的JavaScript插件，用于创建高性能、多功能的轮播图效果。swiper提供了多种分页器样式，包括圆钮式、数字式等，但有时我们需要根据项目需求，自定义分页器的样式和...
vue-swiper的使用教程
10-18
在实际开发过程中，通过阅读Vue-Swiper的文档和Swiper的官方API，可以帮助开发者更快地理解和掌握轮播图组件的使用方法和配置技巧。例如，如果需要获取当前活动轮播项的索引，可以通过监听slideChange事件，在回调...
移动端触摸滑动插件swiper使用方法详解
08-29
Swiper的基本使用 首先，我们需要在HTML文件中添加Swiper的容器元素，并添加Slide元素， Slide元素是Swiper的基本组成部分，可以包含任何类型的内容，如图片、视频、文本等。 ```html <section class="swiper-...
Swiper插件的基本使用方法和案例
2401_84097774的博客
04-20 213
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s。swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s。swiper-animate-effect：切换效果，例如 fadeInUp。步骤五、在需要运动的元素上面增加类名ani ，和其他的类似插件相同。步骤四：Swiper动画的初始化，以及animate的初始化。步骤三：HTML和JS的基本内容。三、Swiper制作元宵节动画。四、基于swiper制作轮播图。
swiper的基本使用
热门推荐
角角兔的博客
06-10 4万+
swiper是什么？ swiper是一款轻量级的轮播图插件，不仅支持pc端更是为移动端而生，用它可以快速地做出一个轮播图，或者扩展使其做出复杂的轮播效果。 基本用法 swiper使用需要两个文件，一个是swiper.css，里面规定了一些在这个滑动轮播插件中常用的样式，当然如果你愿意的话可以自己定义样式 另外一个是swiper.js这个是插件的主体部分。 在页面中引入这两个文件之后首...
如何使用swiper
orichisonic的专栏
03-15 1526
大家都知道如何运用swiper，我只是罗列我在做项目时候的流程，当然大家可以去http://www.swiper.com.cn/看具体例子和一些特殊式样。   我这里涉及两个page，测一测和摇一摇，所以这边定义两个div而且带轮播底部。                                 看看自己适合买基金吗？">       看看自己适合买基金吗？    
Swiper详解
zhong_333的博客
10-21 5755
swiper是一款轻量级的轮播图插件，开源、免费、稳定、使用简单且功能强大，由纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果，是架构移动终端网站的重要选择！
swiper使用教程
q1054007919的博客
03-31 1万+
第一步：点击获取swiper，点击下载Swiper，下载需要版本的swiper压缩包 第二部：在html页面使用，需要将下载文件里的css，min.css以及js,min.js放到自己的文件夹下 自己的文件 html的代码结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont
swiper的用法
small_demons的博客
06-29 356
第一步：点击获取swiper，点击下载Swiper，下载需要版本的swiper压缩包第二部：在html页面使用，需要将下载文件里的css，min.css以及js,min.js放到自己的文件夹下用90是上下滑动，根据自身情况进行选择...
swiper的简单使用教程
weixin_41766191的博客
06-17 1363
什么是swiper? Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ 1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文...
Swiper 中常见的属性以及方法
qq_69282350的博客
11-03 5264
*mySwiper.autoplay.stop() mySwiper.autoplay.start()**一个开始轮播，一个暂停轮播，不多说，那个mySwiper应该是可以修改的，名字是你初始化的swiper名字。**disableOnInteraction: ** 在设置false时，你对轮博图操作不会停止循环，而 true，在你对轮博图操作时会停止自动轮播。**renderBullet: ** 设置了这个属性你就可以设置自己的分页器样式，该属性是一个函数类型，参数是下标索引和类名。
swiper插件使用方法
08-18
以下是 Swiper 插件的基本使用方法： 1. 引入 Swiper 库：在 HTML 文件中引入 Swiper 的 CSS 和 JavaScript 文件。你可以下载 Swiper 的源代码或使用 CDN 引入。 ```html <link rel="stylesheet" href="path/to/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值