轮播图插件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. 《手把手教你》系列技巧篇（六十四）-java+ selenium自动化测试 - cookie -中篇（详细教程）

    1.简介 今天按照原计划宏哥要用实例来给小伙伴或童鞋们来演示一下,如何利用cookie实现跳过验证码进行登录.这个场景是自动登陆.有很多系统的登陆信息都是保存在cookie里的,因此只要往cookie ...

  2. 学习jsp篇：jsp简单实例之二登录

    编程环境:IDEA,Tomcat,JavaEE 一.实例二登录 1.在自己建的工程下的web目录下建一个文件夹为login,在login中编写登录代码(其实就是和实例一同一个项目) 2.先建登录页面j ...

  3. 动态修改UINavigationBar的背景色－－by－胡旭

    这是我们最终想要得到的效果 思路 在UISrollView的delegate方法 - (void)scrollViewDidScroll:(UIScrollView *)scrollView中根据当前 ...

  4. OC和C对比

    1.源文件对比 C语言中常见源文件.h头文件,.c文件 文件扩展名 源类型 .h 头文件,用于存放函数声明 .c C语言源文件,用于实现头文件中声明的方法 OC中的源文件.h头文件,.m与.mm的实现 ...

  5. ImageMagick转换图片格式

    /usr/bin/convert data/manager/tongji/Html/WebData/images/code0/xingfumima0_1000_0.jpg -colorspace cm ...

  6. PRML 基础知识

    1 一个经典例子 ​ 一个经典的例子就是Polynomial Curve Fitting问题,现在将以此为基础介绍一些基本概念和方法.该问题的主要思路是针对给定的训练集\(\mathbf{x}\equ ...

  7. Python—高级函数

    Python-高级函数 一.闭包 Python函数是支持嵌套的.如果在一个内部函数中对外部函数作用域(非全局作用域)的变量进行引用,那么内部函数就会被称为闭包.闭包需要满足如下3个条件: 存在于两个嵌 ...

  8. 【BZOJ2820】YY的GCD(莫比乌斯反演 数论分块)

    题目链接 大意 给定多组\(N\),\(M\),求\(1\le x\le N,1\le y\le M\)并且\(Gcd(x, y)\)为质数的\((x, y)\)有多少对. 思路 我们设\(f(i)\ ...

  9. linux上 oracle数据库的密码过期-解决

    1.登录root用户 su oracle   或者 su - oracle   切换到数据库用户 2.进入SqlPlus sqlplus / as sysdba --进入sqlplus 注意语法  / ...

  10. C# 实例解释面向对象编程中的开闭原则

    在面向对象编程中,SOLID 是五个设计原则的首字母缩写,旨在使软件设计更易于理解.灵活和可维护.这些原则是由美国软件工程师和讲师罗伯特·C·马丁(Robert Cecil Martin)提出的许多原 ...