swiper内容滚动
<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内容滚动的更多相关文章
- swiper内容滚动太长滚动Bug
swiper内部有个横向滚动的盒子 由于swiper滚动,导致滚动盒子的时候自动跳到了下一页 wiper提供一个 noSwipingClass的属性,用来阻止自带的滚动事件 window.mySwip ...
- 推荐一个内容滚动jquery插件
myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...
- Flexslider - 响应式的 jQuery 内容滚动插件
FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 弹窗查看内容时 内容滚动区域设置为body区
看到渣浪的查看文章或者查看大图有个效果:弹窗查看内容时,如果内容过长有滚动条,则滚动条会被放到body区滚动 什么意思呢? 看个图片,一般正常弹窗是有宽高限制的,如果内容过长则直接在弹窗中进行滚动 点 ...
- div+css实现表头固定内容滚动表格
<div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...
- webbrowser内容滚动（javascript内容无缝滚动）
一 使用webbrowser现有方法 引用:https://blog.csdn.net/xiaokailele/article/details/48392673 public partial clas ...
- 每日技术总结：Better-scroll应用于弹出层内容滚动
一.Better-scroll在项目中的应用 Better-scroll这款滚动插件还是很好用的,通常不会有什么问题.但偶尔总会出点意外.今天再次使用better-scroll,记录一下这次顺利的过程 ...
- 控制DIV内容滚动的方法，实现不用拖滚动条就可以看到最新消息
三种控制DIV内容滚动的方法: 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群: 281442983 (点击链接加入群:http://jq.qq.com/?_wv ...
随机推荐
- node.js学习4--------------------- 根据不同路径来响应内容,以及中文乱码的解决
/** * http服务器的搭建,相当于php中的Apache或者java中的tomcat服务器 */ // 导包 const http=require("http"); //创建 ...
- 18-11-05ie 热键的使用
IE浏览器快捷键大全 更新:2013-04-01 17:05 | 标签:快捷键 一般快捷键F11打开/关闭全屏模式 TAB循环的选择地址栏,刷新键和当前标签页 CTRL+F在当前标签页查询字或短语 C ...
- 日积月累---JVM01
Java体系结构包括四个独立但相关的技术: Java程序设计语言 Java class文件格式 Java应用编程接口 Java虚拟机 用Java编程语言编写源代码,把它编译成Java class文件, ...
- go语言关于线程与通道channal
在go语言中,封装了多线程的使用方法,使其变得简单易用. 在这里说说自己一点体会,不正确的地方还是请各位大牛指正. 关于go语言的并发机制,这很简单,在你要执行的函数前面加上go即可 比如: pack ...
- 石头的Xcode学习列表
http://www.cnblogs.com/JangoJing/tag/xcode/
- C#获取本地磁盘信息【转载】
直接上干货简单易懂 //磁盘监控(远程/本地)//需要引用System.Management.dllpublic class RemoteMonitoring{private static str ...
- 入门项目 A6 lib common 登陆状态装饰
# 用户认证装饰器 def auth(func): from core import src def inner(*args, **kwargs): # 调用被装饰函数前需要做的操作 if src.u ...
- 模块四-shutil模块
shutil模块 高级的文件处理模块 主要是文件的处理,移动,压缩和解压缩 shutil模块的使用方法: shutil.copyfile()#拷贝文件 shutil.copy()#拷贝文件和权限 sh ...
- 常用oracle可重复执行的脚本模板
为保证脚本的可重复执行以及丢失,涉及到数据库环境的移植等,就会使用可重复执行脚本,此处仅提供相关一些模板 说明下:该脚本需要在命令窗口执行,而不是在SQL窗口执行 创建序的脚本 /** * 作者:zk ...
- Linux环境下mysql主从同步环境搭建
#my.cnf添加内容vim /etc/my.cnf添加以内容: ## replicationserver_id=195binlog-ignore-db=mysqlbinlog_format=mixe ...