轮播图插件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. jquery里面的$(this)和this的区别

    感谢原文作者:何少旭 原文链接:https://www.cnblogs.com/heshaoxu/p/7672736.html 前言 当你用的是jquery时,就用$(this),如果是JS,就用th ...

  2. Spring学习二：Spring Bean 定义

    Bean 定义 被称作 bean 的对象是构成应用程序的支柱也是由 Spring IoC 容器管理的.bean 是一个被实例化,组装,并通过 Spring IoC 容器所管理的对象.这些 bean 是 ...

  3. HTC组件介绍及应用 HTML

    转载请注明来源:https://www.cnblogs.com/hookjc/ HTML组件封装了HTML内容,并可以插入到别的HTML文档中.在HTML组件出现以前,在HMTL文档中使用自定义控制唯 ...

  4. 【Gym100837F】Controlled Tournament(状压Dp 搜索剪枝)

    题目链接 大意 现有\(N\)个人要打比赛,知道任意两个人间打比赛的胜负关系. 要求在 深度最小 的情况下,根为\(M\)的 竞赛树 的个数. 满足\(1\le M\le N\le 16\) 思路 虑 ...

  5. rabbitmq集群实现

    官方文档 一.环境准备 1.1 IP地址规划 1.2 配置主机域名解析 ##每个节点修改主机名 # hostnamectl set-hostname mq1.example.local # hostn ...

  6. Hadoop完全分布式的配置

    选取机器sam01作为主节点,并进行分布式文件的配置 1.进入Hadoop配置文件路径/usr/local/hadoop/etc/hadoop(这里我把Hadoop安装在/usr/local目录下) ...

  7. Solution -「POJ 3710」Christmas Game

    \(\mathcal{Decription}\)   Link.   定义一棵圣诞树: 是仙人掌. 不存在两个同一环上的点,度数均 \(\ge 3\).   给出 \(n\) 棵互不相关的圣诞树,双人 ...

  8. Java 线程的 5 种状态

    线程状态图: 线程共包括以下 5 种状态: 1. 新建状态(New): 线程对象被创建后,就进入了新建状态.例如,Thread thread = new Thread(). 2. 就绪状态(Runna ...

  9. 命令行与C++

    windows和Linux都接受使用命令行进行程序的运行,例如在windows下使用命令行命令.\notepad可以打开记事本,使用特定的命令行参数,如.\notepad 1.txt可以打开1.txt ...

  10. Linux 中CPU 和 GPU 的行为监控

    由于 Steam(包括 Steam Play,即 Proton)和一些其他的发展,GNU/Linux 正在成为越来越多计算机用户的日常游戏平台的选择.也有相当一部分用户在遇到像视频编辑或图形设计等(K ...