<!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. LaTeX技巧007：每一章开始的header引用名言应该怎么做？

    [问题描述] 看到很多论文的每一章开始的右上角都有一段名人名言, 我试验了很多次一直都搞不清楚是怎么搞?是用fancyhead么?谁可以说说呢? 多谢了 [解决方案] 使用epigraph宏包来制作即 ...

  2. flask操作

    models.py class CompanyGoodsModel(Base): id=Column(Integer, primary_key=True) company_id = Column(In ...

  3. HTML表格显示的笔记

    有时需要显示的复杂表头 如图所示  <table id="" cellpadding="0" cellspacing="0" bord ...

  4. rest_framework:url控制

    一.基本路由(原始方式) 二.半自动路由(视图继承ModelViewSet) 三.自动路由(自动生成路由) 准备工作: models中创建一张表,默认使用sqlite数据库,更新表 新增测试数据 加载 ...

  5. AcWing 891. Nim游戏

    //a1 ^ a2 ^ ··· ^ an = 0 –>先手必败: //a1 ^ a2 ^ ··· ^ an != 0 –>先手必胜: #include<iostream> us ...

  6. Application Server was not connected before run configuration stop, reason: Unable to ping server at localhost:1099

    方法:把catalina.bat 文件中set JAVA_OPTS= -Xmx1024M -Xms512M -XX:MaxPermSize=256m这行去掉,具体看下面两篇博客 https://blo ...

  7. 记录 shell学习过程（6）while 以及 while的嵌套 以及 until

    while中的5种条件 1.数学比较 read -p "Num :" num1 ] do echo 'greater' sleep done 2.字符串比较 read -p &qu ...

  8. java注册界面及mysql连接

    题目要求 完成注册界面及添加功能 1登录账号:要求由6到12位字母.数字.下划线组成,只有字母可以开头:(1分) 2登录密码:要求显示“• ”或“*”表示输入位数,密码要求八位以上字母.数字组成.(1 ...

  9. 在多租户（容器）数据库中如何创建PDB：方法5 DBCA远程克隆PDB

    基于版本:19c (12.2.0.3) AskScuti 创建方法:DBCA静默远程克隆PDB.将 CDB1 中的 PDB1 克隆为 CDB2 中的 ERP2 对应路径:Creating a PDB ...

  10. AM335X的应用程序自启动流程以及U盘更新应用程序记录

    在AM335X的SD卡更新系统学习记录中最后更新完系统后,以后运行应用程序都会从EMMC中取出Linux系统运行.接着介绍Linux系统是怎么自己启动我们编写的应用程序的. 1.在AM335X的SD卡 ...