swiper.jquery 滑屏插件（3.0版）

￡神魔★判官ぃ 2022-01-13 16:11 239阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

[css引用链接][css]

http://static.kaiba315.com/swiper.min.css

[js引用链接][js]

http://static.kaiba315.com/swiper.jquery.min.js

此插件基于jQuery插件使用。 [Swiper中文网][Swiper]

1,html内容

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

2，初始化Swiper：最好是挨着</body>标签

<script>        
      var mySwiper = new Swiper ('.swiper-container', {
        direction: 'vertical',
        loop: true,
        
        // 如果需要分页器
        pagination: '.swiper-pagination',
        
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        
        // 如果需要滚动条
        scrollbar: '.swiper-scrollbar',
      })        
      </script>
    </body>

转载于:https://my.oschina.net/u/2393989/blog/3026328

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/cc7b17e2ea76462b8d01f01499ca18a5.png
[css]: http://static.kaiba315.com/swiper.min.css
[js]: http://static.kaiba315.com/swiper.jquery.min.js
[Swiper]: http://www.swiper.com.cn/

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关 30 款 IDEA 插件

一、常用 -------------------- Presentation Assistant 快捷键展示录屏或者共享的时候，效果极佳 ![在这里插入图片

素颜马尾好姑娘i/ 2023年10月12日 12:11/ 0 赞/ 8 阅读

相关 html图片全屏显示插件,jQuery全屏内容显示插件

特效描述：jQuery 全屏内容显示插件。jQuery全屏内容显示插件代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Jquery Full Co

你的名字/ 2022年10月09日 04:57/ 0 赞/ 286 阅读

相关 jQuery全屏滚动插件FullPage.js

jQuery全屏滚动插件FullPage.js中文帮助文档API 文章目录 [简介][Link 1] [主要功能][Link 2] [兼容性][Lin

川长思鸟来/ 2022年09月22日 03:46/ 0 赞/ 300 阅读

相关 jquery横向滑屏滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

柔情只为你懂/ 2022年08月13日 04:59/ 0 赞/ 167 阅读

相关移动Web滑屏框架分享

月26号参加 [webrebuild][]深圳站，会上听了彪叔的对初心的讲解，“工匠精神”这个词又一次被提出，也再次引起了我对它的思考。专注一个项目并把它做得好，很好，更好..

梦里梦外;/ 2022年08月07日 08:36/ 0 赞/ 163 阅读

相关全屏滚动插件pagePiling.js

[pagePiling.js参数详解][pagePiling.js] [pagePiling.js][pagePiling.js 1] 这款 jQuery 插件可以帮助前

清疚/ 2022年05月20日 02:49/ 0 赞/ 423 阅读

相关 jQuery插件_跟随鼠标滑入滑出的蒙版

效果： ![70][] 代码： 1、masking.js jQuery.fn.extend({ masking:function(obj){

女爷i/ 2022年05月08日 09:50/ 0 赞/ 154 阅读

相关 swiper.jquery 滑屏插件（3.0版）

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] [css引用链接][css] http://s

￡神魔★判官ぃ/ 2022年01月13日 16:11/ 0 赞/ 240 阅读

相关 uni-app 拖动滑块验证（插件分享）

插件地址：[https://ext.dcloud.net.cn/plugin?id=573][https_ext.dcloud.net.cn_plugin_id_573]

我会带着你远行/ 2021年12月10日 08:41/ 0 赞/ 1921 阅读

相关 jquery 网页全屏显示插件

今天工作中，遇到了一个网页全屏显示的需求，于是查了一下百度，发现了一个网页全屏显示的jQuery插件：jQuery FullScreen Plugin 。他

布满荆棘的人生/ 2021年06月24日 14:00/ 0 赞/ 819 阅读