bxslider使用帮助
使用 帮助
2023-06-13 09:16:07 时间
“bxSlider”就是一款响应式的幻灯片js插件
bxSlider特性
充分响应各种设备,适应各种屏幕;
支持多种滑动模式,水平、垂直以及淡入淡出效果;
支持图片、视频以及任意html内容;
支持触摸滑动;
支持Firefox,Chrome,Safari,iOS,Android,IE7+
bxSlider使用方法:
加载jQuery库,加载bxSlider插件文件和相关CSS文件;
<!-- bxSlider CSS file -->
<link href="jquery.bxslider.css" rel="stylesheet" />
<!-- jQuery library -->
<script src="jquery-3.1.1.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="jquery.bxslider.js"></script>
创建一个幻灯片区块:
<ul class="bxslider">
<li><img src="images/pic1.jpg" /></li>
<li><img src="images/pic2.jpg" /></li>
<li><img src="images/pic3.jpg" /></li>
<li><img src="images/pic1.jpg" /></li>
<li><img src="images/pic2.jpg" /></li>
</ul>
加上bxSlider参数激活使用:
<script>
$(document).ready(function() {
$('.bxslider').bxSlider({
mode: 'horizontal',
moveSlides: 1,
slideMargin: 40,
infiniteLoop: true,
slideWidth: 660,
minSlides: 3,
maxSlides: 3,
speed: 800,
});
});
</script>
bxSlider下载地址:官方下载
bxSlider具体参数:
参数 | 描述 | 默认值 |
---|---|---|
mode | 设置滑动模式,'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出 | horizontal |
speed | 内容切换速度,数字,ms | 500 |
startSlide | 初始滑动位置,数字 | 0 |
randomStart | 随机初始滑动位置 | true |
infiniteLoop | 循环滑动,如果设置为true时,则到最后滑动位置时会切换到初始位置 | true |
easing | 切换动画扩展,可以借助jQuery Easing 动画效果扩展设置不同的切换动画效果 | null |
captions | 设置显示图片标题,当滑动内容为图片时并设置属性title,可以显示图片标题 | false |
video | 支持视频,当设置为true时,需要jquery.fitvids.js支持 | false |
pager | 设置是否显示分页,设置为true时,会在滑动内容下方显示分页图标 | true |
controls | 设置是否显示上一副和下一幅按钮 | true |
auto | 设置是否自动滑动 | false |
pause | 自动滑动时停留时间,数字,ms | 4000 |
autoHover | 当鼠标滑向滑动内容上时,是否暂停滑动 | false |
Simple, focused
相关文章
- 万能头文件可能产生的副作用_头文件使用std
- Linux 基础-学会使用命令帮助
- 大数据ClickHouse进阶(一):ClickHouse使用场景和集群安装
- Mybatis使用concat函数
- 使用hmmlearn框架实现中文分词
- 7.Jenkins插件安装使用帮助说明
- 在生产环境中使用 Linkerd
- Ubuntu 不使用 Apache 架设 Subversion(SVN) 服务器
- 介绍一款 ABAP 代码搜索工具 RS_ABAP_SOURCE_SCAN 的使用方法
- 如何使用chatgpt 可以帮助我们做些什么
- pypi pip 清华源使用帮助
- 关于SpringBoot 使用 Redis 分布式锁解决并发问题
- Oracle 视图 V$XSTREAM_MESSAGE_TRACKING 官方解释,作用,如何使用详细说明
- 使用高匿爬虫代理的安全性
- WinMTR工具使用帮助
- Enpass是一款功能丰富且强大的密码管理器,可以帮助你管理各种密码和私人账号信息,可永久免费使用
- 注意:由于mongodb.dll是Windows操作系统中MongoDB数据库驱动程序文件的扩展名,因此建议您提供更为详细或具体的信息或上下文,以帮助我们更准确地为您提供标题。以下是针对不同情境的几个标题建议: 如何修复无法加载mongodb.dll文件的问题 遇到mongodb.dll缺失怎么办?快速恢复驱动程序 介绍Windows上使用mongodb.dll实现MongoDB数据库连接的方法 mongodb.dll文件及其在MongoDB应用程序中的作用(mongodb.dll)
- 使用Redis命令行实现登录功能 25字(redis登录命令行)
- Sorry,我不能提供关于非法行为的帮助和指导,不能提供任何有关破解版的信息和资源。请尊重知识产权和法律法规,合法使用软件。(mongodb破解版)
- WinMTR工具使用帮助
- Mysql帮助:使用Help命令掌握实用技巧(mysql help命令)
- 什么简介及使用方法MySQL 中的 DTP 是指 Data Transfer Protocol(数据传输协议),它可以帮助用户在数据库之间转移数据本文将为您介绍 DTP 的概念和使用方法
- Windows系统如何使用CMD控制MySQL(cmd怎么控制mysql)
- 一步步教你如何使用cmd启动MySQL6(cmd启动mysql6)
- 简单易行Oracle数据库如何帮助用户提高效率(oracle 使用用户)
- 破解Redis架构借助虚拟机的帮助(使用虚拟机里的redis)
- 24小时制使用帮助Oracle教程(oracle中24小时制)
- 成本Redis如何帮助企业降低内存使用成本(redis 降低内存使用)
- SQLServerSQLAgent服务使用教程小结
- SQL中sp_executesql存储过程的使用帮助
- 使用sqlservermanagementstudio2008无法查看数据库,提示无法为该请求检索数据错误916解决方法
- php预定义变量使用帮助(带实例)
- asp.net使用AJAX实现无刷新分页