<!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. [SDOI2015][bzoj3994] 约数个数和 [莫比乌斯反演]

    题面: 传送门 思路: 首先,我们需要证明一个结论:d(i*j)等于sigma(gcd(x,y)==1),其中x为i的约数,y为j的约数 对于nm的每一个质因子pi分别考虑,设n = pi^ai + ...

  2. [NOI2010][bzoj2006] 超级钢琴 [主席树/ST表+堆]

    题面: 传送门 思路: 首先容易想到用堆维护的O(n2logn)暴力 那么肯定就是在这个基础上套数据结构了[愉快] 然而我因为过于蒟蒻......只想得到主席树暴力***过去的方法 大概就是把前缀和算 ...

  3. js复制到粘贴板

    http://www.cnblogs.com/52fhy/p/5383813.html(移动端有兼容性问题) 要页面加载完直接绑定事件,否则第一次点击是绑定事件,第二次才触发事件 移动端需要设置tex ...

  4. CodeForces 605 E. Intergalaxy Trips

    E. Intergalaxy Trips time limit per test:2 seconds memory limit per test:256 megabytes input:standar ...

  5. Eclipse配置关联Tomcat并运行项目

    打开Eclipse,单击“Window”菜单,选择最下方的“Preferences”. 单击“Server”选项,选择下方的“Runtime Environments”. 点击“Add”添加Tomca ...

  6. hdu 3440(差分约束好题)

    House Man Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  7. Cryptography I 学习笔记 --- 总结

    在b站上大概的看完了Dan Boneh的密码学,对现代密码学总算有了一个粗浅的认识. 总算能在纸上手写RSA公式并且证明之了,蛤蛤. 总体的感触就是,现代密码学是一个非常博大精深的体系,我等程序员最重 ...

  8. 牛客网 牛客小白月赛1 H.写真がとどいています

    H.写真がとどいています   链接:https://www.nowcoder.com/acm/contest/85/H来源:牛客网     这个题数乱了,导致wa了好几次. 特别弱智,从A开始往上,就 ...

  9. 洛谷——P3183 [HAOI2016]食物链

    P3183 [HAOI2016]食物链 题目描述 如图所示为某生态系统的食物网示意图,据图回答第1小题现在给你n个物种和m条能量流动关系,求其中的食物链条数.物种的名称为从1到n编号M条能量流动关系形 ...

  10. 构建更好的HashMap

    在7月份的那期 Java理论与实践(“并发集合类”)中,我们简单地回顾了可伸缩性的瓶颈,并讨论了怎么用共享数据结构的方法获得更高的并发性和吞吐量.有时候学习的最好方法是分析专家的成果,所以这个月我们将 ...