<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>Swiper demo</title>

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

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

  <!-- Demo styles -->

  <style>

    html, body {

      position: relative;

      height: 100%;

    }

    body {

      background: #eee;

      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

      font-size: 14px;

      color:#000;

      margin: 0;

      padding: 0;

    }

    .swiper-container {

      width: 100%;

      height: 100%;

    }

    .swiper-slide {

      text-align: center;

      font-size: 18px;

      background: #fff;

      /* Center slide text vertically */

      display: -webkit-box;

      display: -ms-flexbox;

      display: -webkit-flex;

      display: flex;

      -webkit-box-pack: center;

      -ms-flex-pack: center;

      -webkit-justify-content: center;

      justify-content: center;

      -webkit-box-align: center;

      -ms-flex-align: center;

      -webkit-align-items: center;

      align-items: center;

    }

  </style>

</head>

<body>

  <!-- Swiper -->

  <div class="swiper-container">

    <div class="swiper-wrapper">

      <div class="swiper-slide">Slide 1</div>

      <div class="swiper-slide">Slide 2</div>

      <div class="swiper-slide">Slide 3</div>

      <div class="swiper-slide">Slide 4</div>

      <div class="swiper-slide">Slide 5</div>

      <div class="swiper-slide">Slide 6</div>

      <div class="swiper-slide">Slide 7</div>

      <div class="swiper-slide">Slide 8</div>

      <div class="swiper-slide">Slide 9</div>

      <div class="swiper-slide">Slide 10</div>

    </div>

    <!-- Add Pagination -->

    <div class="swiper-pagination"></div>

    <!-- Add Arrows -->

    <div class="swiper-button-next"></div>

    <div class="swiper-button-prev"></div>

  </div>

  <!-- Swiper JS -->

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

  <!-- Initialize Swiper -->

  <script>

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

      pagination: {

        el: '.swiper-pagination',

        type: 'fraction',

      },

      navigation: {

        nextEl: '.swiper-button-next',

        prevEl: '.swiper-button-prev',

      },

    });

  </script>

</body>

</html>

Swiper 移动端全屏轮播图效果的更多相关文章

  1. Vue与swiper想结合封装全屏轮播插件

    项目需求介绍: 1.页面图文混排, 2.点击图片后全屏展示图片,并在底部显示文字,如果没有则不显示 3.关闭全屏后依然停留在上次浏览的位置 4.浏览图片时,不管点击的哪张图片,全屏展示的时候也要显示这 ...

  2. 关于最近在做的一个js全屏轮播插件

    最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用m ...

  3. 小程序实践（二）：swiper组件实现轮播图效果

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

  4. 全屏banner及全屏轮播

    一.全屏banner 1.设置网页图片全屏banner <!DOCTYPE html> <html lang="en"> <head> < ...

  5. vue2 使用 swiper 轮播图效果

    第一步.先安装swiper插件 npm install swiper@3.4.1 --save-dev 第二步.组件内引入swiper插件 import Swiper from 'swiper' im ...

  6. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  7. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  8. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

  9. Android项目实战（四十七）：轮播图效果Viewpager

    简易.常用的轮播图效果ViewPager ,老技术了,记一笔留着以后ctrl C + ctrl V    需求如下: 不定张个数的ImagView轮播,右下角显示轮播点图标,每隔固定时间切换下一张,最 ...

随机推荐

  1. 在创建窗口句柄之前，不能在控件上调用 Invoke 或 BeginInvoke。”

    出现场景: From1中事件B绑定在事件A,事件A由工厂模式下的设备产生,当离开Form1时,设备中的事件A仍然会触发事件B,此时就会导致如上问题 原因(个人理解): 1.Form1已经被销毁了,但仍 ...

  2. 在myEclipse中根据图表自动生成Hibernate文件

    1.新建一个Java Project项目,在scr中创建两个包:Com.hibernate.po 和com.hibernate.dao 2. 3.点击ok 4. 5.选中MyElipse Derby, ...

  3. xmlns:android="http://schemas.android.com/apk/res/android 这句话的作用

    xmlns:android="http://schemas.android.com/apk/res/android 有了这句话,你就可以alt+/作为提示,提示你输入什么,不该输入什么,什么 ...

  4. HTML表单处理

    一.表单简介 表单的处理是一个多进程.首先创建一张表单,以供用固话输入详细的请求信息.接着,输入的数据被发送到服务器,在服务器里这些数据得到编译和错误检测.如果PHP代码识别出一个或多个需要重新输入的 ...

  5. 2019牛客竞赛第六场D Move 宏观单调，部分不单调

    Move 题意 有k个体积相同的箱子,有个憨憨有固定的装箱策略,每次都只装可以装的重量中最大的东西,求箱子的最小提及 分析 看起来可以二分,但由于他的装箱策略有点蠢,所以只在宏观上满足单调性,在特别小 ...

  6. ASP.NET Razor 语法

    主要的 Razor C# 语法规则 Razor 代码块包含在 @{ ... } 中 内联表达式(变量和函数)以 @ 开头 代码语句用分号结束 变量使用 var 关键字声明 字符串用引号括起来 C# 代 ...

  7. linq和匿名方法、委托、匿名委托、lambda

    委托相当于JavaScript中的闭包,c++中的函数指针. c#为了引进这个函数指针,将其进行包装成“委托”,同时将非托管的变成托管的. 1.最初的委托该怎么用 弊端:写的代码量过多,还要写一个显示 ...

  8. Tomcat/conf/server.xml文件中docBase和path的说明

    Tomcat的项目部署方式有以下三种: 1.直接把项目复制到Tomcat安装目录的webapps目录中,这是最简单的一种Tomcat项目部署的方法.2.在tomcat安装目录中有一个conf文件夹,打 ...

  9. Centos7在防火墙中添加访问端口

    1.       查看jenkins启动状态命令:systemctl status Jenkins 保证jenkins启动,此处的状态为正在运行 2.       查看防火墙状态命令:systemct ...

  10. python3练习100题——026

    原题链接:http://www.runoob.com/python/python-exercise-example26.html 题目:利用递归方法求5!. 是25题递归方式的简化版所以很容易. 我的 ...