<!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. apt-get 更换源

    环境:Ubuntu 准备环境 apt-get 更换源 cd /etc/apt sudo apt-get install vim sudo vim sources.list deb http://mir ...

  2. IPFS

    http://www.r9it.com/20190412/ipfs-private-net.html IPFS指令集中文版(一) https://www.jianshu.com/p/ce74b32d2 ...

  3. [Linux]方便openmp等程序的类似编译

    因为总是打参数例如-fopenmp或者-lGL等等有些麻烦,所以特地写一个可以使用的bash文件用来执行简单的操作 首先在.profile中添加 if [ -d "$HOME/bin&quo ...

  4. mac 安装 python 配置||虚拟环境

    前篇:http://www.cnblogs.com/ostrich-sunshine/p/8747791.html 介绍了 Mac 下 python 的一些相关知识. 这篇介绍 python3 的安装 ...

  5. iOS添加测试设备与调试

    转至:http://www.lidaze.com/   在上一篇博客中,已经购买好了开发账号,既然都交了钱了,就做点有意义的事吧!要想使用真机测试,需要准备如下: 1.证书:安装到电脑上的cer文件, ...

  6. 【HDOJ5977】Garden of Eden（点分治）

    题意:给定一棵n个点的树,每个节点上有一种颜色a[i],一共有k种颜色,问包含所有颜色的路径条数 n<=5e4,k<=10 思路:点分治求方案数 集合并卷积的时候暴力枚举状态即可O(n^l ...

  7. 当文字过长时裁剪（显示省略号或只裁剪 用CSS方法，不用程序）

    原文发布时间为:2009-09-16 -- 来源于本人的百度文章 [由搬家工具导入] CSS中ellipsis()应用【转】 CSS手册中text-overflow属性的定义： 　　语法： text- ...

  8. SQL存储过程基础

    什么是存储过程呢?存储过程就是作为可执行对象存放在数据库中的一个或多个SQL命令. 通俗来讲:存储过程其实就是能完成一定操作的一组SQL语句. 那为什么要用存储过程呢?1.存储过程只在创造时进行编译, ...

  9. selenium入门教程c#

    一. 简述 1. 介绍 Selenium是ThoughtWorks专门为Web应用程序编写的一个验收测试工具. Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE. ...

  10. LeetCode OJ-- Palindrome Partitioning II ***

    https://oj.leetcode.com/problems/palindrome-partitioning-ii/ 给定一个串,让把它划分成子串,要求每个子串都是回文的. 动态规划: 设数组 a ...