<!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. 简单的log

    简单的方法想日志中追加内容 public static void updateSql(string Name,string str) { FileStream fs = new FileStream( ...

  2. This dependency was not found: * !!vue-style-loader!css-loader? 解决方案

    但是当你新建一个vue项目时,需要重新安装stylus,否则报错: This dependency was not found: * !!vue-style-loader!css-loader?{&q ...

  3. 从jekyll转向hexo

    当年选择jekyll是因为看中了HCZ Material theme这个主题，折腾了很久才把博客搭建好，后来周边人准备些博客的时候已经不推荐使用jekyll了，推荐hexo给好几个人，不用他们折腾，（ ...

  4. react自定义组件属性类型检测

    react当中的props-type用来检测传入组件当中的数据是否符合组件的要求,但是之前的只是能做些简单常规的判断,如果需要做复杂的判断,就需要使用到自定义函数来做类型检测了. 下面是官网的例子 c ...

  5. ofbiz数据库表结构设计（2）- CONTACT_MECH

    ofbiz中,party的电话.地址等联系方式设计得非常巧妙,让我们来仔细分析一下. 有一个叫做CONTACT_MECH的表,这张表我们把它称作联系方式表,一个电话号码.一个通讯地址.一个电子邮件,都 ...

  6. Mysql和sqlServer命令比较

    http://cool.china.blog.163.com/blog/static/697310642010111202531210 Mysql和sqlServer命令比较 按语句功能划分,依次讲解 ...

  7. JavaScript真的要一统江湖了

    ttp://www.newsmth.net/nForum/#!article/Python/125347?p=4 标  题: JavaScript真的要一统江湖了 发信站: 水木社区 (Fri Sep ...

  8. GMM 的EM 实现

    算法逻辑在这里: http://www.cnblogs.com/Azhu/p/4131733.html 贴之前先说下,本来呢是打算自己写一个的,在matlab 上,不过,实在是写不出来那么高效和健壮的 ...

  9. layui 的单选框

    <div class="layui-form-item"> <label class="layui-form-label">是否通过&l ...

  10. s 中日期 转换成时间戳 例如2013-08-30 转换为时间戳

    以前遇到过一个关于时间戳的问题,为了不被大家鄙视,先说一下概念. 具体时间戳怎么定义的我也不清楚,但百度百科中有这么一句:“时间戳是自 1970 年 1 月 1 日(00:00:00 GMT)至当前时 ...