#⚠️ Looking for a maintainer ⚠️
Please contact me if you are interested in keeping our community alive:
https://github.com/stevenwanderski/bxslider-4/issues/1095
---
#bxSlider 4.2.12
##The fully-loaded, responsive jQuery content slider
###Why should I use this slider?
* Fully responsive - will adapt to any device
* Horizontal, vertical, and fade modes
* Slides can contain images, video, or HTML content
* Full callback API and public methods
* Small file size, fully themed, simple to implement
* Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+
* Tons of configuration options
For complete documentation, tons of examples, and a good time, visit:
[http://bxslider.com](http://bxslider.com)
Written by: Steven Wanderski - [http://stevenwanderski.com](http://stevenwanderski.com)
###License
Released under the MIT license - http://opensource.org/licenses/MIT
Let's get on with it!
##Installation
###Step 1: Link required files
First and most important, the jQuery library needs to be included (no need to download - link directly from Google). Next, download the package from this site and link the bxSlider CSS file (for the theme) and the bxSlider Javascript file.
```html
<!-- jQuery library (served from Google) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
```
###Step 2: Create HTML markup
Create a `<ul class="bxslider">` element, with a `<li>` for each slide. Slides can contain images, video, or any other HTML content!
```html
<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/pic4.jpg" /></li>
</ul>
```
###Step 3: Call the bxSlider
Call .bxSlider() on `<ul class="bxslider">`. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!
```javascript
$(document).ready(function(){
$('.bxslider').bxSlider();
});
```
##Configuration options
###General
**mode**
Type of transition between slides
```
default: 'horizontal'
options: 'horizontal', 'vertical', 'fade'
```
**speed**
Slide transition duration (in ms)
```
default: 500
options: integer
```
**slideMargin**
Margin between each slide
```
default: 0
options: integer
```
**startSlide**
Starting slide index (zero-based)
```
default: 0
options: integer
```
**randomStart**
Start slider on a random slide
```
default: false
options: boolean (true / false)
```
**slideSelector**
Element to use as slides (ex. <code>'div.slide'</code>).<br />Note: by default, bxSlider will use all immediate children of the slider element
```
default: ''
options: jQuery selector
```
**infiniteLoop**
If <code>true</code>, clicking "Next" while on the last slide will transition to the first slide and vice-versa
```
default: true
options: boolean (true / false)
```
**hideControlOnEnd**
If <code>true</code>, "Prev" and "Next" controls will receive a class <code>disabled</code> when slide is the first or the last<br/>Note: Only used when <code>infiniteLoop: false</code>
```
default: false
options: boolean (true / false)
```
**easing**
The type of "easing" to use during transitions. If using CSS transitions, include a value for the <code>transition-timing-function</code> property. If not using CSS transitions, you may include <code>plugins/jquery.easing.1.3.js</code> for many options.<br />See <a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">http://gsgd.co.uk/sandbox/jquery/easing/</a> for more info.
```
default: null
options: if using CSS: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'. If not using CSS: 'swing', 'linear' (see the above file for more options)
```
**captions**
Include image captions. Captions are derived from the image's <code>title</code> attribute
```
default: false
options: boolean (true / false)
```
**ticker**
Use slider in ticker mode (similar to a news ticker)
```
default: false
options: boolean (true / false)
```
**tickerHover**
Ticker will pause when mouse hovers over slider. Note: this functionality does NOT work if using CSS transitions!
```
default: false
options: boolean (true / false)
```
**adaptiveHeight**
Dynamically adjust slider height based on each slide's height
```
default: false
options: boolean (true / false)
```
**adaptiveHeightSpeed**
Slide height transition duration (in ms). Note: only used if <code>adaptiveHeight: true</code>
```
default: 500
options: integer
```
**video**
If any slides contain video, set this to <code>true</code>. Also, include <code>plugins/jquery.fitvids.js</code><br />See <a href="http://fitvidsjs.com/" target="_blank">http://fitvidsjs.com/</a> for more info
```
default: false
options: boolean (true / false)
```
**responsive**
Enable or disable auto resize of the slider. Useful if you need to use fixed width sliders.
```
default: true
options: boolean (true /false)
```
**useCSS**
If true, CSS transitions will be used for horizontal and vertical slide animations (this uses native hardware acceleration). If false, jQuery animate() will be used.
```
default: true
options: boolean (true / false)
```
**preloadImages**
If 'all', preloads all images before starting the slider. If 'visible', preloads only images in the initially visible slides before starting the slider (tip: use 'visible' if all slides are identical dimensions)
```
default: 'visible'
options: 'all', 'visible'
```
**touchEnabled**
If <code>true</code>, slider will allow touch swipe transitions
```
default: true
options: boolean (true / false)
```
**swipeThreshold**
Amount of pixels a touch swipe needs to exceed in order to execute a slide transition. Note: only used if <code>touchEnabled: true</code>
```
default: 50
options: integer
```
**oneToOneTouch**
If <code>true</code>, non-fade slides follow the finger as it swipes
```
default: true
options: boolean (true / false)
```
**preventDefaultSwipeX**
If <code>true</code>, touch screen will not move along the x-axis as the finger swipes
```
default: true
options: boolean (true / false)
```
**preventDefaultSwipeY**
If <code>true</code>, touch screen will not move along the y-axis as the finger swipes
```
default: false
options: boolean (true / false)
```
**wrapperClass**
Class to wrap the slider in. Change to prevent from using default bxSlider styles.
```
default: 'bx-wrapper'
options: string
```
###Pager
**pager**
If <code>true</code>, a pager will be added
```
default: true
options: boolean (true / false)
```
**pagerType**
If <code>'full'</code>, a pager link will be generated for each slide. If <code>'short'</code>, a x / y pager will be used (ex. 1 / 5)
```
default: 'full'
options: 'full', 'short'
```
**pagerShortSeparator**
If <code>pagerType: 'short'</code>, pager will use this value as the separating character
```
default: ' / '
options: string
```
**pagerSelector**
Element used to populate the populate the pager. By default, the pager is appended to the bx-viewport
```
default: ''
options: jQuery selector
```
**pagerCustom**
Parent element to be used as the pager. Parent element must contain a <code><a data-slide-index="x"></code> element for each slide. See example <a href="/examples/thumbnail-method-1">here</a>. Not for use with dynamic carousels.
```
default: null
options: jQuery selector
```
**buildPager**
If supplied, function is called on every slide element, and the returned value is used as the pager item markup.<br />See <a href="http://bxslider.com/examples">examples</a> for detailed implementation
```
default: null
options: function(slideIndex)
```
###Controls
**controls**
If <code>true</code>, "Next" / "Prev" controls will be added
```
default: true
options: boolean (true / false)
```
**nextText**
Text to be used for the "Next" control
```
default: 'Next'
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
人工智能-项目实践-课程设计-php+mysql+html+jQuery 养老院网站的设计与制作(前台展示+后台管理) (726个子文件)
bootstrap.min.css 135KB
layui.css 36KB
main480.css 28KB
main.css 28KB
default.css 20KB
dataTables.jqueryui.css 16KB
jquery.dataTables.css 15KB
layer.css 14KB
jquery.dataTables_themeroller.css 14KB
dataTables.jqueryui.min.css 14KB
jquery.dataTables.min.css 13KB
dialog.css 10KB
laydate.css 8KB
layui.mobile.css 8KB
backstage.css 8KB
dataTables.bootstrap4.css 5KB
dataTables.bootstrap.css 5KB
dataTables.bootstrap4.min.css 5KB
index.css 4KB
dataTables.bootstrap.min.css 4KB
jquery.bxslider.css 4KB
dataTables.uikit.css 4KB
datepicker.css 4KB
datepicker.css 3KB
dataTables.uikit.min.css 3KB
personal_info.css 3KB
jquery.bxslider.min.css 3KB
qq.css 3KB
dataTables.semanticui.css 3KB
dataTables.foundation.css 3KB
main.css 3KB
dataTables.semanticui.min.css 3KB
dataTables.material.css 3KB
dataTables.foundation.min.css 3KB
dataTables.material.min.css 2KB
mF_fancy.css 2KB
simple.css 2KB
mF_fscreen_tb.css 2KB
mF_pithy_tb.css 2KB
mF_slide3D.css 2KB
mF_games_tb.css 2KB
mF_tbhuabao.css 2KB
mF_kdui.css 2KB
mF_shutters.css 2KB
mF_ladyQ.css 2KB
mF_classicHB.css 2KB
mF_classicHC.css 2KB
mF_kiki.css 2KB
mF_rapoo.css 1KB
mF_YSlider.css 1KB
mF_liquid.css 1KB
mF_taobao2010.css 1KB
mF_qiyi.css 1KB
public.css 1KB
mF_sohusports.css 1KB
mF_liuzg.css 1KB
mF_expo2010.css 1KB
mF_quwan.css 1KB
mF_peijianmall.css 1KB
mF_51xflash.css 1KB
mF_pconline.css 1KB
code.css 1KB
reset.css 1014B
reset.css 1012B
mF_taobaomall.css 965B
prettify.css 960B
mF_dleung.css 957B
mF_luluJQ.css 874B
reset.css 797B
WdatePicker.css 182B
Thumbs.db 144KB
Thumbs.db 6KB
Thumbs.db 5KB
.DS_Store 8KB
iconfont.eot 52KB
static.gif 35KB
35.gif 13KB
42.gif 13KB
59.gif 10KB
40.gif 10KB
22.gif 10KB
logo.gif 9KB
bx_loader.gif 8KB
18.gif 8KB
19.gif 8KB
24.gif 8KB
11.gif 8KB
13.gif 7KB
loading.gif 7KB
32.gif 7KB
16.gif 7KB
39.gif 6KB
64.gif 6KB
49.gif 6KB
63.gif 6KB
50.gif 6KB
29.gif 6KB
loading-0.gif 6KB
4.gif 6KB
1.gif 5KB
共 726 条
- 1
- 2
- 3
- 4
- 5
- 6
- 8
资源评论
博士僧小星
- 粉丝: 1771
- 资源: 5875
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 四数之和(java代码).docx
- 701837906919458TapScanner v3.0.10 (Pro).apk
- 青岛大学人工智能实验二 利用α-β搜索的博弈树算法编写一字棋游戏
- ### 1、项目介绍 本项目Scrapy进行数据爬取,并使用Django框架+PyEcharts实现可视化大屏 效果如下:
- # 微信小程序-健康菜谱 基于微信小程序的一个查找检索菜谱的应用 ### 效果 !动态图(./res/gif/demo
- zabbix-get命令包资源
- 289ssm-mysql-jsp 计算机课程实验管理系统.zip(可运行源码+数据库文件+文档)
- 毕业设计,基于PyQt5实现的可视化界面的Python车牌自动识别系统源码
- 20-天天果园项目.rar
- 26-朴素贝叶斯分类.rar
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功