<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <link rel="stylesheet" type="text/css" href="Swiper-3.4.1/dist/css/swiper.min.css"/>

         <style type="text/css">

             .swiper-container {

                 width: 600px;

                 height: 300px;

                 background: blueviolet;

             }

             .swiper-slide{

                 width: 25%;

                 height: 150px;

                 background: magenta;

                 color: #FFF;

                 line-height: 150px;

                 font-size: 20px;

                 text-align: center;

             }

         </style>

     </head>

     <body>

         <div class="swiper-container">

             <div class="swiper-wrapper">

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

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

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

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

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

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

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

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

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

             </div>

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

         </div>

         <script src="js/jquery/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>

         <script src="Swiper-3.4.1/dist/js/swiper.jquery.min.js"></script>

         <script>

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

             slidesPerView : 4,

                  //这两个貌似没有影响

             //slidesPerGroup : 4,

              //slidesPerGroup : 2,

             slidesPerColumn : 2,

             slidesPerColumnFill : 'row',

             pagination: '.swiper-pagination',

             autoplayDisableOnInteraction: false

           })

           </script>

     </body>

 </html>

swiper-demo1的更多相关文章

  1. swiper快速切换插件（两个综合案例源码）

    swiper快速切换插件 swiper.js自己去官网下载哈.先来一个tab切换案例: demo.html <!doctype html> <html> <head> ...

  2. swiper tabs综合示例

    html部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  3. swiper插件 纵向内容超出一屏解决办法

    1.css .swiper-slide { overflow: auto; } 2.js var swiper = new Swiper('.swiper-container', { directio ...

  4. swiper的初步使用

    1.引入文件,顺序引入(此处基于jquery,且版本至少1.7以上) <link rel="stylesheet" href="path/to/swiper-3.4 ...

  5. 关于移动端swiper的2种样式重置

    手机查看效果地址:猛戳 ,PC端查看可以缩放浏览器窗口看效果~~ 思路:主要考虑选择器优先级大于默认就可以随意撸码 注意:该demo里用的mobile-adaptive.js是让页面以rem自适应,也 ...

  6. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  7. swiper框架，实现轮播图等滑动效果

    http://www.swiper.com.cn/ 做个记录而已,这个没什么好说的,对于需要手机端开发实现触摸等方式可以看看.

  8. swiper.animate~之~可以执行两种动画的升级版的Swiper Animate

        1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... < ...

  9. swiper横向轮播--3d

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. swiper横向轮播（兼容IE8）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. shell for 循环实践

    for循环语法结构如下 [root@backup tmp]# .sh #!/bin/bash ` do echo $i done [root@backup tmp]# .sh 3 批量修改文件名 [r ...

  2. 回文串(bzoj 3676)

    Description 考虑一个只包含小写拉丁字母的字符串s.我们定义s的一个子串t的“出 现值”为t在s中的出现次数乘以t的长度.请你求出s的所有回文子串中的最 大出现值. Input 输入只有一行 ...

  3. pat 甲级 1034. Head of a Gang (30)

    1034. Head of a Gang (30) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue One wa ...

  4. pat 甲级 Public Bike Management

    Public Bike Management (30) 题目描述 There is a public bike service in Hangzhou City which provides grea ...

  5. 洛谷 P1027 Car的旅行路线

    P1027 Car的旅行路线 题目描述 又到暑假了,住在城市A的Car想和朋友一起去城市B旅游.她知道每个城市都有四个飞机场,分别位于一个矩形的四个顶点上,同一个城市中两个机场之间有一条笔直的高速铁路 ...

  6. Use ASP.NET and DotNetZip to Create and Extract ZIP Files

    原文发布时间为:2011-02-16 -- 来源于本人的百度文章 [由搬家工具导入] Published: 11 Feb 2011By: Scott MitchellDownload Sample C ...

  7. loj 6278 6279 数列分块入门 2 3

    参考:「分块」数列分块入门1 – 9 by hzwer 2 Description 给出一个长为\(n\)的数列,以及\(n\)个操作,操作涉及区间加法,询问区间内小于某个值\(x\)的元素个数. 思 ...

  8. AC日记——文艺平衡树 洛谷 P3391

    文艺平衡树 思路: splay翻转操作模板: 虚拟最左最右端点,然后每次都把l翻转到root,r+2翻转到root的右节点: 然后在r+2的左节点上打标记: 标记需要在旋转,rank,print时下放 ...

  9. 当前标识(IIS APPPOOL\ASP.NET v4.0)没有对“C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files”的写访问权限 解决方案

    今天搭环境的时候遇到这个问题,折腾了一阵子,最后在微软官方论坛上找到了解决方案. https://forums.asp.net/t/1566987.aspx?Current+Identity+does ...

  10. hihoCoder #1586 : Minimum-结构体版线段树(单点更新+区间最值求区间两数最小乘积) (ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛)

    #1586 : Minimum Time Limit:1000ms Case Time Limit:1000ms Memory Limit:256MB Description You are give ...