#bxSlider 4.1.1
##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 WTFPL license - http://sam.zoy.org/wtfpl/
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="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/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)
```
###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'
options: string
```
**prevText**
Text to be used for the "Prev" control
```
default: 'Prev'
options: string
```
**nextSelector**
Element used to populate the "Next" control
```
default: null
options: jQuery
没有合适的资源?快使用搜索试试~ 我知道了~
PHP实例开发源码-WordPress IOS7风格主题 The7.zip
共1656个文件
png:516个
php:356个
js:284个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 62 浏览量
2022-11-21
19:41:06
上传
评论
收藏 24.81MB ZIP 举报
温馨提示
PHP实例开发源码—WordPress IOS7风格主题 The7.zip PHP实例开发源码—WordPress IOS7风格主题 The7.zip PHP实例开发源码—WordPress IOS7风格主题 The7.zip
资源推荐
资源详情
资源评论
收起资源包目录
PHP实例开发源码-WordPress IOS7风格主题 The7.zip (1656个子文件)
js_composer_bridge.css.bak 4KB
custom-skin6.css 411KB
custom-skin4.css 411KB
custom-skin5.css 408KB
custom-skin1.css 407KB
custom-skin2.css 406KB
custom-skin3.css 405KB
main.css 355KB
animate.css 73KB
style.css 63KB
js_composer.css 56KB
tpl_js_composer_front.css 43KB
js_composer_front.css 43KB
orig_jquery-ui-1.8.20.custom.css 32KB
royalslider.css 32KB
media.css 28KB
jquery-ui-less.custom.css 26KB
prettyPhoto.css 19KB
font-awesome.min.css 17KB
jquery.ui.theme.css 17KB
select2.css 17KB
style.css 16KB
demo.css 13KB
admin_mbox_magick.css 11KB
optionsframework.css 10KB
normalize.css 8KB
jquery-ui.css 7KB
shCore.css 6KB
jquery.autoSuggest.css 5KB
js_composer_bridge.css 4KB
jquery.ui.datepicker.css 4KB
css3_animations.css 4KB
flexslider.css 4KB
jquery.bxslider.css 4KB
bar.css 3KB
validationEngine.jquery.css 3KB
window.css 3KB
bootstrap.modals.css 3KB
shThemeDefault.css 3KB
js_composer_settings.css 3KB
wireframe.css 2KB
color-picker.min.css 2KB
default.css 2KB
light.css 2KB
dark.css 2KB
nivo-slider.css 2KB
style.css 2KB
style.css 2KB
colors.css 2KB
site_demos.css 1KB
style.css 1KB
mixins-args.css 1KB
style.css 1KB
jquery.ui.core.css 1KB
image.css 1KB
mixins.css 1KB
isotope.css 1KB
misc.css 1KB
admin-widgets.css 1KB
file.css 1KB
jquery.ui.slider.css 1KB
attributes.css 1KB
editor-style.css 1KB
builtins.css 1KB
media.css 929B
math.css 928B
strings.css 813B
style.old.css 800B
import.css 789B
keyframes.css 768B
pattern_matching.css 720B
mixin_merging.css 663B
nested.css 642B
guards.css 413B
plupload-image.css 408B
variables.css 385B
ie.css 376B
rtl.css 368B
mixins-named-args.css 356B
compile_on_mixin.css 337B
directives.css 336B
jquery-ui-timepicker-addon.css 331B
font_family.css 323B
interpolation.css 315B
arity.css 307B
heading.css 303B
escape.css 292B
slider.css 257B
selector_expressions.css 230B
nesting.css 221B
accessors.css 204B
admin_edit_style.css 194B
divider.css 174B
color.css 170B
taxonomy.css 158B
scopes.css 123B
mixin_functions.css 107B
range.css 101B
select-advanced.css 70B
select.css 61B
共 1656 条
- 1
- 2
- 3
- 4
- 5
- 6
- 17
资源评论
毕业_设计
- 粉丝: 1992
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 技术册投标文件的的查重
- 通信原理(第七版 樊昌信 曹丽娜)思维导图
- genad-hGridSample-test.hbm
- cvtocc-shanghai.hbm
- k8s安装ingress-nginx
- dnSpy-net-win32-222.zip
- mongoose-free-6.9
- 德普微一级代理 DP100N06MGL PDFN3.3*3.3 TRMOS N-MOSFET 60V, 8mΩ, 45A
- 【java毕业设计】SpringBoot+Vue幼儿园管理系统 源码+sql脚本+论文 完整版
- 德普微一级代理 DP021N03FGLI DFN5*6 DPMOS N-MOSFET 30V 180A 1.8mΩ
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功