ready_artworks_project

  • a0_259231
    了解作者
  • 3MB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-04 01:31
    上传日期
#bxSlider 4.1.2 ##完整的响应式jQuery内容滑块 ###为什么要使用此滑块? 完全响应-将适应任何设备 水平,垂直和淡入淡出模式 幻灯片可以包含图像,视频或HTML内容 完整的回调API和公共方法 文件小,主题完整,易于实现 浏览器支持:Firefox,Chrome,Safari,iOS,Android,IE7 + 大量的配置选项 有关完整的文档,大量示例和良好时机,请访问: 编剧:史蒂芬Wanderski - ### License根据MIT许可证发布-http: 让我们继续吧! ##安装 ###步骤1:链接所需文件 首先也是最重要的一点是,需要包括jQuery库(无需下载-直接从Google链接)。 接下来,从该站点下载该软件包,并链接bxSlider CSS文件(用于主题)和bxSlider Javascript文件。 <!-- jQuery
ready_artworks_project-master.zip
  • ready_artworks_project-master
  • images
  • bird12.jpg
    63.7KB
  • bird7.jpg
    63.7KB
  • bird11.jpg
    291.5KB
  • bird_watching.PNG
    563.2KB
  • bx_loader.gif
    8.4KB
  • bird10.jpg
    71.5KB
  • bird2.jpg
    74.2KB
  • bird3.jpg
    65.7KB
  • bird1.jpg
    287.2KB
  • controls.png
    2.7KB
  • bird9.jpg
    58KB
  • logo_grey.PNG
    3.4KB
  • bird8.jpg
    343.2KB
  • bird5.jpg
    85.3KB
  • bird4.jpg
    212.2KB
  • logo.PNG
    3.6KB
  • fascinating_fact.PNG
    512.8KB
  • bird6.jpg
    97.1KB
  • package.json
    602B
  • js
  • jquery.bxslider.js
    49.4KB
  • jquery.bxslider.min.js
    18.9KB
  • jquery.colorbox.js
    28.4KB
  • jquery.colorbox-min.js
    11.6KB
  • birds_inc_webpage.html
    11.6KB
  • lib
  • birds_inc_style.css
    7.7KB
  • colorbox.css
    4.3KB
  • jquery.bxslider.css
    3.7KB
  • i18n
  • jquery.colorbox-pt-BR.js
    446B
  • jquery.colorbox-it.js
    439B
  • jquery.colorbox-sk.js
    437B
  • jquery.colorbox-fa.js
    707B
  • jquery.colorbox-my.js
    858B
  • jquery.colorbox-ar.js
    482B
  • jquery.colorbox-lv.js
    459B
  • jquery.colorbox-ru.js
    551B
  • jquery.colorbox-nl.js
    419B
  • jquery.colorbox-si.js
    440B
  • jquery.colorbox-no.js
    437B
  • jquery.colorbox-cs.js
    458B
  • jquery.colorbox-et.js
    388B
  • jquery.colorbox-sr.js
    507B
  • jquery.colorbox-tr.js
    498B
  • jquery.colorbox-kr.js
    450B
  • jquery.colorbox-sv.js
    412B
  • jquery.colorbox-zh-CN.js
    425B
  • jquery.colorbox-zh-TW.js
    409B
  • jquery.colorbox-bn.js
    561B
  • jquery.colorbox-uk.js
    596B
  • jquery.colorbox-da.js
    425B
  • jquery.colorbox-ro.js
    472B
  • jquery.colorbox-hu.js
    430B
  • jquery.colorbox-ja.js
    465B
  • jquery.colorbox-gl.js
    323B
  • jquery.colorbox-pl.js
    464B
  • jquery.colorbox-fi.js
    408B
  • jquery.colorbox-es.js
    334B
  • jquery.colorbox-fr.js
    470B
  • jquery.colorbox-bg.js
    571B
  • jquery.colorbox-de.js
    425B
  • jquery.colorbox-id.js
    391B
  • jquery.colorbox-gr.js
    567B
  • jquery.colorbox-hr.js
    429B
  • jquery.colorbox-he.js
    449B
  • jquery.colorbox-ca.js
    343B
  • jquery.colorbox-lt.js
    446B
  • readme.md
    14.4KB
  • colorbox.ai
    229.8KB
  • plugins
  • jquery.fitvids.js
    2.8KB
  • jquery.easing.1.3.js
    7.9KB
  • bower.json
    403B
  • birds_inc_webpage_mobile.html
    12.1KB
内容介绍
#bxSlider 4.1.2 ##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="//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></li> <li></li> <li></li> <li></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" rel='nofollow' onclick='return false;'>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" rel='nofollow' onclick='return false;'>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>&lt;a data-slide-index="x"&gt;</code> element for each slide. See example <a href="/examples/thumbnail-method-1" rel='nofollow' onclick='return false;'>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" rel='nofollow' onclick='return false;'>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 ``` defaul
评论
    相关推荐