轮播图插件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. 「SHOI2006」有色图

    首先发现这题虽然是边的置换,但是是由点的置换所造成的,并且发现点置换对应的所有边置换和置换操作构成置换群. 由于颜色可以全选,那么根据 Polya 定理,答案为: \[|X / G| = \frac{ ...

  2. AT3913 XOR Tree

    经过长时间的思考,我发现直接考虑对一条链进行修改是很难做出本题的,可能需要换一个方向. 可以发现本题中有操作的存在,是没有可以反过来做的做法的,因此正难则反这条路应该走不通. 那么唯一的办法就是简化这 ...

  3. Func<>用法

    Func是一个委托,委托里面可以存方法,Func<string,string>或Func<string,string,int,string>等 前几个是输入参数,最后一个是返回 ...

  4. bom-offset

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 【Java】equals()与hashCode()方法详解 (转)

    java.lang.Object类中有两个非常重要的方法: 1 2 public boolean equals(Object obj) public int hashCode() Object类是类继 ...

  6. python——rsa加签名以及分段加密

    借鉴 https://www.cnblogs.com/sammy1989/p/9583965.html 最近请求一个系统,对方要求加密.折腾了一天,使用pycryptodome库,最终代码如下: #! ...

  7. 快速搭建springboot工程

    一.创建SpringBoot的三种方式 在线创建: https://start.spring.io 在IntelliJ IDEA中选择Spring Initializr创建:或者在Eclipse中选择 ...

  8. Solution -「LOCAL」二进制的世界

    \(\mathcal{Description}\)   OurOJ.   给定序列 \(\{a_n\}\) 和一个二元运算 \(\operatorname{op}\in\{\operatorname{ ...

  9. linux 运维工程师如何降低工作难度

    文章目录 1.Linux "优化" 2.git "优化" 3.mysql "优化" 4.kubernetes "优化" ...

  10. ThinkPHP5中使用第三方类库

    在TP5中有两种方式使用第三方类库,如果类库支持composer方式安装那就很方便了,使用composer安装的类库存储在Vendor目录下,可以直接使用,以phpmailer为例,使用如下命令安装: ...