轮播图插件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. 「CTSC 2011」幸福路径

    [「CTSC 2011」幸福路径 蚂蚁是可以无限走下去的,但是题目对于精度是有限定的,只要满足精度就行了. \({(1-1e-6)}^{2^{25}}=2.6e-15\) 考虑使用倍增的思想. 定义\ ...

  2. NSDictionary基本概念

    1.NSDictionar基本概念 什么是NSDictionary NSDictionary翻译过来叫做"字典" 日常生活中,"字典"的作用:通过一个拼音或者汉 ...

  3. ◆JAVA加密解密-DES

    DES算法提供CBC, OFB, CFB, ECB四种模式,MAC是基于ECB实现的. 一.数据补位 DES数据加解密就是将数据按照8个字节一段进行DES加密或解密得到一段8个字节的密文或者明文,最后 ...

  4. 01网络编程（基础知识+OSI七层协议+TCP与UDP）

    目录 01 网络编程 一.软件开发架构 1.1 CS架构 1.2 BS架构 二.网络理论前戏 2.1 简介 2.2 常见硬件 三.OSI七层协议(五层) 3.1 七层协议 3.2 五层协议 3.3 知 ...

  5. Process Doppelg&#228;nging

    进程注入:Process Doppelgänging   攻击者可以通过Process Doppelgänging将恶意代码注入到进程中,从而逃避基于进程的防护,并且进行可能的特权提升.Process ...

  6. Grafana v8.3.3 & jmeter-influxdb2-backend

    1. 说明 接上篇文章,今天继续聊Grafana & influxdb2-backend. 2. Grafana v8.3.3安装 下载rpm包 wget https://dl.grafana ...

  7. Redis 学习-上

    一.Redis 概述 1.1.Redis 定义 Redis (Remote Dictionary Server):远程字典服务 是一个开源的使用 ANSI C 语言编写.支持网络.可基于内存亦可持久化 ...

  8. 利用iptables做网络转发

    常见的网络拓扑图结构如下: 但是内网服务器偶尔有上网需求,比如yum工具,wget文件.而我们又不能让重要业务直接暴露在公网上. 好用的安全策略有:三层交换机.路由器做nat映射,防火墙做安全策略. ...

  9. Spring Boot 学习-基础

    一.Spring Boot 概述 SpringBoot 定义 Spring Boot 并不是用来替代 Spring 的新框架,而是和 Spring 框架紧密结合用于提升 Spring 开发者体验的工具 ...

  10. 李宏毅机器学习笔记——新手感悟——PM2.5作业

    python也不会,计算机也不会,啥都不会,只带了个脑子考了计算机研究生.研究生选了人工智能方向.看来注定是漫长的学习之旅. PM2.5作业,我是一个字都看不懂.所以我采用了直接看答案的方案.把答案看 ...