脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Swiper插件的使用和介绍

一起来了解下Swiper插件的使用和介绍

 更新时间：2022年01月27日 16:57:19   作者：赤子 之心  
这篇文章主要为大家详细了解了Swiper插件的使用和介绍，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

Swiper介绍

swiper是一款开源的解决前端开发中触摸滑动案例的插件

swiper官网：

swiper的使用

使用swiper首先要下载swiper

 下载完成后在官网在线演示中找到你所需要的

 这里我选择了基础演示中的010

 首先在你下载的压缩包中找到010的demo文件

 打开后点击鼠标右键打开网页源代码

打开编辑器在自己项目中引入swiper.min.css        swiper-bundle.min.js  两个文件

复制打开的网页源代码中的结构html  样式css以及js代码

最后就可以使用swiper插件

代码实现

<!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-bundle.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 {
            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;
        }
        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <!-- Swiper -->
    <div class="swiper mySwiper">
        <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>
    </div>
    <!-- Swiper JS -->
    <script src='js/swiper-bundle.min.js'></script>
    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {});
    </script>
</body>
</html>

最后如果想改变Swiper插件的API可以阅读API文档，然后结合项目更改

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容! 

您可能感兴趣的文章:

相关文章

  • 让ie6也支持websocket采用flash封装实现

    让ie6也支持websocket采用flash封装实现

    ie9都不支持websocket,何况ie6,往往这些不可思议的事情却意想不到的发生了;websocket能开发那么酷的功能,怎么能让ie拦住我们的脚步,用falsh封装吧，感兴趣的你可不要错过了哈
    2013-02-02
  • JavaScript修改注册表实例代码

    JavaScript修改注册表实例代码

    这篇文章主要介绍了JavaScript修改注册表实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-01-01
  • 每天一篇javascript学习小结（String对象）

    每天一篇javascript学习小结（String对象）

    这篇文章主要介绍了javascript中的String对象知识点，对String对象的基本使用方法，以及各种方法进行整理，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 如何轻松在JavaScript中字符串的字符之间添加空格

    如何轻松在JavaScript中字符串的字符之间添加空格

    在前端开发的过程中,我们经常会遇到需要对于输入的字符串进行格式化处理,下面这篇文章主要给大家介绍了关于如何轻松在JavaScript中字符串的字符之间添加空格的相关资料,需要的朋友可以参考下
    2023-03-03
  • 分享JS数组求和与求最大值的方法

    分享JS数组求和与求最大值的方法

    数组求和在项目需求中还是挺常见的，比如购物车金额统计、人员的前台统计等等。今天小编先是给大家分享了JS数组求和的两个方法，而后又用实例演示js数组求和，并求出数组中的最大值，一起来看看吧。
    2016-08-08
  • js中apply与call简单用法详解

    js中apply与call简单用法详解

    这篇文章主要为大家详细介绍了js中apply与call简单用法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • JavaScript实现GriwView单列全选(自写代码)

    JavaScript实现GriwView单列全选(自写代码)

    在 GridView 里有一系列的 Checkbox ，要实现对其全选或全不选，二网上的都不否和要求，于是我自己写了JavaScript 代码，贴出来供大家参考
    2013-05-05
  • javascript通过class来获取元素实现代码

    javascript通过class来获取元素实现代码

    javascript获取元素有很多的方法，本文简单的介绍下通过class获取元素的实现代码，感兴趣的朋友可以参考下，希望本文知识点可以帮助到你
    2013-02-02
  • 更靠谱的H5横竖屏检测方法(js代码)

    更靠谱的H5横竖屏检测方法(js代码)

    这篇文章主要为大家详细介绍了更靠谱的横竖屏检测方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • javascript实现跨域的方法汇总

    javascript实现跨域的方法汇总

    这篇文章主要给大家汇总介绍了javascript实现跨域的方法的相关资料,需要的朋友可以参考下
    2015-06-06

最新评论