脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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文档，然后结合项目更改

总结

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

您可能感兴趣的文章:

相关文章

  • javaScript 利用闭包模拟对象的私有属性

    javaScript 利用闭包模拟对象的私有属性

    JavaScript缺少块级作用域，没有private修饰符，但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量（除了this和argument
    2011-12-12
  • Javascript延迟执行实现方法(setTimeout)

    Javascript延迟执行实现方法(setTimeout)

    延迟执行，其实就是用到了setTimeout这个函数。善于利用这个函数，可以减少很多ajax的请求，以及dom操作。
    2010-12-12
  • 基于JS实现前端压缩上传图片的实例代码

    基于JS实现前端压缩上传图片的实例代码

    这篇文章主要介绍了基于JS实现前端压缩上传图片的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • JavaScript十大取整方法实例教程

    JavaScript十大取整方法实例教程

    这篇文章主要给大家介绍了关于JavaScript的十大取整方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • javascript自定义的addClass()方法

    javascript自定义的addClass()方法

    这篇文章主要介绍了javascript自定义的addClass()方法，通过传参就可以实现样式的添加
    2014-05-05
  • js实现搜索框关键字智能匹配代码

    js实现搜索框关键字智能匹配代码

    这篇文章主要为大家分享了js实现搜索框关键字智能匹配代码，感兴趣的朋友可以参考一下
    2016-01-01
  • JS实现的自定义网页拖动类

    JS实现的自定义网页拖动类

    这篇文章主要介绍了JS实现的自定义网页拖动类,涉及页面元素响应鼠标事件动态改变属性的相关实现技巧,需要的朋友可以参考下
    2015-11-11
  • bootstrap datetimepicker日期插件使用方法

    bootstrap datetimepicker日期插件使用方法

    这篇文章主要为大家详细介绍了bootstrap datetimepicker的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JavaScript中实现页面跳转的几种常用方法总结

    JavaScript中实现页面跳转的几种常用方法总结

    本文主要介绍了网页开发中页面跳转的概念和重要性,及使用JS实现页面跳转的几种常见方法,包括使用window.location.href,window.location.replace(),window.location.assign(),window.open(),form表单提交以及HTML的a标签等方法实现页面跳转,需要的朋友可以参考下
    2024-10-10
  • layui点击按钮添加可编辑的一行方法

    layui点击按钮添加可编辑的一行方法

    今天小编就为大家分享一篇layui点击按钮添加可编辑的一行方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论