<!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. Codeforces Round #330 (Div. 2) B 容斥原理

    B. Pasha and Phone time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  2. Write with Vim (1)

    Write with Vim (1) 本文出自Svitter的blog 原文在之前的也曾发表 大约在一年前使用vim?这个也是个不确定的时间.具体什么时间使用Vim早已经忘记了. 现在用的还算顺手,但 ...

  3. github的一些简单用法

     关于 项目 上传  大多数人都是使用命令行上传 步骤分为以下几步: 在github上创建你的  repositories  ->github.com - >右下角  new reopsi ...

  4. SPOJ HIGH Highways

    In some countries building highways takes a lot of time... Maybe that's because there are many possi ...

  5. Android开发跳坑记录

    本文主要记录在Android开发中遇见的一些问题,以及解决方法. 2015.12.01 1.adb.exe 端口被占用 解决: http://blog.csdn.net/xiaanming/artic ...

  6. php --图片加图片水印

    最近在做一个视频网站需要视频有一个封面图片,但是不能是普通的图片,能让别人一眼看出来是 视频,所以我就在图片上面加了视频播放器的那种水印,具体代码如下: <?php/** * 图片加水印(适用于 ...

  7. 多线程设计模式 - Future模式

    Future模式是多线程开发中非常常见的一种设计模式,它的核心思想是异步调用.这类似我们日常生活中的在线购物流程,带在购物网看着一件商品时可以提交表单,当订单完成后就可以在家里等待商品送货上门.或者说 ...

  8. nodejs递归创建目录

    var fs = require("fs"); var path = require("path"); // 递归创建目录 异步方法 function mkdi ...

  9. Maven错误“Failed to execute goal org.apache.maven.plugins:maven-archetype-plugin:2.4:create ”解决

    用maven3新建一个项目时,输入的命令如下: mvn archetype:create 出现错误如下: [ERROR] Failed to execute goal org.apache.maven ...

  10. eos智能合约与主进程交互

    eos智能合约与主进程交互 1.启动wasm 参考eos智能合约执行流程.md 2.智能合约调用主进程api 如何实现wasm代码与eos宿主交互还需要摸索! 大致:在wasm_interface.c ...