轮播图插件Swiper3

HTML代码

如果只是简单的使用轮播图,直接复制我的html代码就可以.

如果想要高级一些,就自己去看文档吧

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Swiper demo</title>

    <!-- Link Swiper's CSS -->

    <link rel="stylesheet" href="../dist/css/swiper.min.css">

    <!-- Demo styles -->

    <style>

    .swiper-container {

        width: 600px;

        height: 300px;

    }

    .swiper-slide[one]{

        background-image: linear-gradient(to bottom, #F45843 ,#9143af );

    }

    .swiper-slide[two]{

        background-image: linear-gradient(to bottom, #F45843 ,#4395f4 );

    }

    .swiper-slide[three]{

        background-image: linear-gradient(to bottom, #F45843 ,#e4f443 );

    }

    </style>

</head>

<body>

    <!-- Swiper -->

    <div class="swiper-container">

        <div class="swiper-wrapper">

            <div class="swiper-slide" one>图片1</div>

            <div class="swiper-slide" two>图片2</div>

            <div class="swiper-slide" three>图片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>

    <!-- Swiper JS -->

    <script src="../dist/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->

    <script>

    var swiper = new Swiper('.swiper-container',{

        // direction: 'vertical',

            loop: true,

            // 如果需要分页器

            // pagination:'.swiper-pagination',

            //

            // // 如果需要前进后退按钮

            // nextButton: '.swiper-button-next',

            // prevButton: '.swiper-button-prev',

            //

            // // 如果需要滚动条

            // scrollbar: '.swiper-scrollbar',

    });

    </script>

</body>

</html>

js,css下载地址

https://files.cnblogs.com/files/wangzhaobo/swiper.min.js

https://files.cnblogs.com/files/wangzhaobo/swiper.min.css

github地址

https://github.com/nolimits4web/swiper

中文API地址

https://www.swiper.com.cn/api/start/new.html

jquery, js轮播图插件Swiper3的更多相关文章

  1. jQuery封装轮播图插件

    // 布局要求,必须有一个容器,图片和两个按钮,布局方式自定,小圆点样式固定 // <div class="all"> // <img src="img ...

  2. (网页)swiper.js轮播图插件

    Swiper4.x使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件.可下载Swiper文件或使用CDN. <!DOCTYPE html&g ...

  3. 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

  4. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  5. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  6. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  7. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  8. 原生JavaScript（js）手把手教你写轮播图插件（banner）

    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...

  9. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

随机推荐

  1. Vue2技术整理3 - 高级篇 - 更新完毕

    3.高级篇 前言 基础篇链接:https://www.cnblogs.com/xiegongzi/p/15782921.html 组件化开发篇链接:https://www.cnblogs.com/xi ...

  2. Java程序设计（2021春）——第五章输入输出笔记与思考

    Java程序设计(2021春)--第五章输入输出笔记与思考 本章概览: 异常处理简介 程序运行时,环境.操作等可能出现各种错误.故障,我们希望程序具有容错能力,给出错误信息.面向对象的程序设计里有异常 ...

  3. 16进制字符串和byte数组进行相互转换\将10进制转换为任意进制

    16进制字符串和byte数组进行相互转换 简介 1个byte对应8个bit,16进制使用4个bit,所以一个byte转成16进制,占用两位. JAVA代码 private static final c ...

  4. git命令log与reflog的比较

    感谢原文作者:杨鲜生 原文链接:https://blog.csdn.net/u013252047/article/details/80230781 用git命令,想看到自己的操作记录,则可以使用log ...

  5. treevalue——Master Nested Data Like Tensor

    首先,请和我一起高呼--"treevalue--通用树形结构建模工具 + 极简树形结构编程模型". 咳咳,好久没更新了,这一次是真的好久不见,甚是想念.在之前的三期中,关于 tre ...

  6. 用python的turtle作图（二）动画吃豆人

    本文是用python的turtle作图的第二篇,通过这个例子可以了解动画的原理,用python自带的turtle库制作一些小动画. 1.问题描述 在上一篇"用python的turtle作图( ...

  7. Solution -「UVA 1104」Chips Challenge

    \(\mathcal{Description}\)   Link.   在一个 \(n\times n\) 的方格图中,有一些格子已经放了零件,有一些格子可以放零件,其余格子不能放零件.求至多放多少个 ...

  8. Git简单介绍以及使用入门

    Git Git:分布式版本控制系统, 此外还有 SVN (集中式版本控制系统) 下载地址(阿里云镜像) :CNPM Binaries Mirror (npmmirror.com) Git Bash : ...

  9. Redis 源码简洁剖析 13 - RDB 文件

    RDB 是什么 RDB 文件格式 Header Body DB Selector AUX Fields Key-Value Footer 编码算法说明 Length 编码 String 编码 Scor ...

  10. 使用Flask开发简单接口

    作为测试人员,在工作或者学习的过程中,有时会没有可以调用的现成的接口,导致我们的代码没法调试跑通的情况. 这时,我们使用python中的web框架Flask就可以很方便的编写简单的接口,用于调用或调试 ...