<!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. burpsuite各个板块儿详细讲解

    burpsuite实战指南,想要的都在这里:https://t0data.gitbooks.io/burpsuite/content/

  2. nginx反向代理https访问502, nginx反向代理, 支持SNI的https回源,SNI源点，nginx反向代理报错

    正常nginx配置了SSL是可以通过HTTPS访问后端的,但是对有配置SNI + https后端的支持有点麻烦. 编译安装nginx后,看一下是否支持SNI /usr/local/nginx/sbin ...

  3. JavaSwing开发简单的银行管理系统 附源码

    开发环境: Windows操作系统开发工具: MyEclipse/Eclipse+Jdk+mysql数据库 运行效果图:

  4. [luogu3950] 部落冲突 - Link Cut Tree

    有了LCT这不就是思博题了吗 #include <bits/stdc++.h> using namespace std; const int N = 1000000; int n,m,t1 ...

  5. springmvc 整合 redis

    引入依赖 <!--redis--> <dependency> <groupId>redis.clients</groupId> <artifact ...

  6. html div四边阴影效果

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  7. jvm(3)：JVM调优

    typora-root-url: ./ JVM调优思路 目的:减少full GC次数.减少STW时间(一次GC的时间) 手段: 打印GC日志-XX:+PrintGCDetails -XX:+Print ...

  8. Java-POJ1013-Counterfeit Dollar

    在13枚硬币中找出fake的那一个 输入:三次天平称量结果 package poj.ProblemSet; import java.util.Scanner; /* 我怎么觉得是贪心算法呢? 起初对所 ...

  9. rancher版本问题引发的节点注册失败失败

    rancher版本问题引发的节点注册失败失败 待办 https://www.cnblogs.com/Me1onRind/p/11147639.html

  10. Apache Kafka（二）- Kakfa 安装与启动

    安装并启动Kafka 1.下载最新版Kafka(当前为kafka_2.12-2.3.0)并解压: > wget http://mirror.bit.edu.cn/apache/kafka/2.3 ...