<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="swiper-4.1.6/dist/css/swiper.min.css">

    <script src="swiper-4.1.6/dist/js/swiper.min.js"></script>

    <style>

        .swiper-container {

            width: 600px;

            height: 600px;

        }

        .swiper-slide{

            heigth:40px;

            line-height:40px;

        }

    </style>

</head>

<body>

<div class="swiper-container">

    <div class="swiper-wrapper">

        <div class="swiper-slide">孑影侧枕床木，寒思冻彻身骨。</div>

        <div class="swiper-slide">拥衾难寐空屋，起衣温酒一壶。</div>

        <div class="swiper-slide">北国夜无雪，念念藏纸雀。</div>

        <div class="swiper-slide">枯守孤盏灯，清坐又一更。</div>

        <div class="swiper-slide">昨冬初逢可忆，今朝苦等难遇。</div>

        <div class="swiper-slide">去日欢颜几许？来年再会可期？</div>

        <div class="swiper-slide">北国夜无雪，隐隐惧相逢。</div>

        <div class="swiper-slide">宁负痴心某，独熬愚情种。</div>

        <div class="swiper-slide">夕阳几缕染双眸，旧月一轮诉肠衷。</div>

        <div class="swiper-slide">声色如彼化于风，形影似我遁无声。</div>

        <div class="swiper-slide">北国夜无雪，隐隐惧相逢。</div>

        <div class="swiper-slide">宁负痴心某，独熬愚情种。</div>

        <div class="swiper-slide">夕阳几缕染双眸，旧月一轮诉肠衷。</div>

        <div class="swiper-slide">声色如彼化于风，形影似我遁无声。</div>

        <div class="swiper-slide">北国夜无雪，疏疏门前路。</div>

        <div class="swiper-slide">子犹守岁烛，冷暖梦何苦。</div>

    </div>

    <!-- 如果需要分页器 -->

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

    <!-- 如果需要导航按钮 -->

    <!--<div class="swiper-button-prev"></div>-->

    <!--<div class="swiper-button-next"></div>-->

    <!-- 如果需要滚动条 -->

    <!--<div class="swiper-scrollbar"></div>-->

</div>

<script>

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

        direction: 'vertical', // 垂直切换选项

        slidesPerView: 10, //同时显示数量 默认1

        loop: true, // 循环模式选项

        // 如果需要分页器

        pagination: {

            el: '.swiper-pagination',

        },

        // 如果需要前进后退按钮

        navigation: {

            nextEl: '.swiper-button-next',

            prevEl: '.swiper-button-prev',

        },

        // 如果需要滚动条

        scrollbar: {

            el: '.swiper-scrollbar',

        },

        autoplay: {

            delay: 1000,//1秒切换一次

        },

    })

</script>

</body>

</html>

swiper内容滚动的更多相关文章

  1. swiper内容滚动太长滚动Bug

    swiper内部有个横向滚动的盒子 由于swiper滚动,导致滚动盒子的时候自动跳到了下一页 wiper提供一个 noSwipingClass的属性,用来阻止自带的滚动事件 window.mySwip ...

  2. 推荐一个内容滚动jquery插件

    myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...

  3. Flexslider - 响应式的 jQuery 内容滚动插件

    FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...

  4. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  5. 弹窗查看内容时 内容滚动区域设置为body区

    看到渣浪的查看文章或者查看大图有个效果:弹窗查看内容时,如果内容过长有滚动条,则滚动条会被放到body区滚动 什么意思呢? 看个图片,一般正常弹窗是有宽高限制的,如果内容过长则直接在弹窗中进行滚动 点 ...

  6. div+css实现表头固定内容滚动表格

    <div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...

  7. webbrowser内容滚动（javascript内容无缝滚动）

    一 使用webbrowser现有方法 引用:https://blog.csdn.net/xiaokailele/article/details/48392673 public partial clas ...

  8. 每日技术总结：Better-scroll应用于弹出层内容滚动

    一.Better-scroll在项目中的应用 Better-scroll这款滚动插件还是很好用的,通常不会有什么问题.但偶尔总会出点意外.今天再次使用better-scroll,记录一下这次顺利的过程 ...

  9. 控制DIV内容滚动的方法，实现不用拖滚动条就可以看到最新消息

    三种控制DIV内容滚动的方法: 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv ...

随机推荐

  1. Python序列的一点用法

    #python的基本语法网上已经有很多详细的解释了,写在这里方便自己记忆一些 序列,顾名思义,是一段数据的有序排列,列表,元组,字符串都是序列的一种,序列有很多BIF(BIF是内建方法,即python ...

  2. Java容器解析系列(10) Map AbstractMap 详解

    前面介绍了List和Queue相关源码,这篇开始,我们先来学习一种java集合中的除Collection外的另一个分支------Map,这一分支的类图结构如下: 这里为什么不先介绍Set相关:因为很 ...

  3. 关于系统弹出错误:429 ， ActiveX 部件不能创建对象 的解决方法

    例如:win7 win10的系统,有时候运行某些软件会出现:429 , ActiveX 部件不能创建对象 的情况. 提示: "运行时错误'429': ActiveX 部件不能创建对象&quo ...

  4. vue axios上传文件实例

    <head> <title></title> <meta charset="UTF-8"> <meta name=" ...

  5. selenium中的对文本进行全选，复制，粘贴，剪切和删除的操作

    # 键盘全选操作from selenium.webdriver.common.keys import Keysdriver.find_element_by_css_selector('#key-dem ...

  6. bottle.py中的SimpleTemplate

    import re class SimpleTemplate(object): re_block = re.compile(r'^\s*%\s*((if|elif|else|try|except|fi ...

  7. [python3.6+opencv] 01 完成读取图片操作

    学习一下opencv3 奈何vs2017配的云里雾里,还是使用python吧 --人生苦短,python来凑 --使用Pycharm操作,面向界面的Pycharm好一些吧(我猜的) 新建Project ...

  8. 2017年5月11日17:43:06 rabbitmq 消费者队列

    从昨天开始发现个问题,一个接口在本地调用时大部分正常,一旦在生成者打一个断点调试,并且在promotion也打断点的时候会出现没有返回channel的异常,然后消费者就再也消费不了了 16:57:45 ...

  9. 十分钟搞定 pandas

    原文:http://pandas.pydata.org/pandas-docs/stable/10min.html 译者:ChaoSimple 校对:飞龙 官方网站上<10 Minutes to ...

  10. shell 删除颜色代码

    sed -r "s/\x1B\[([0-9]{1,2}(;[0-9]{1,2})?)?[m|K]//g"