插件 jQuery.Liquid Slider 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.Liquid Slider 中文API文档 https://github.com/KevinBatdorf/liquidslider

Liquid Slider

A Responsive jQuery HTML Content Slider

Demo Page | Example Page (Advanced)

I’m on Twitter: @Kevin Batdorf

Update

I’m going to make this compatible with NPM soon, but for now there’s a work around. Two issues:

  1. You still need to load in the dependencies on your own
  2. the asset files wil have to be manually moved, or overridden in your own css

Installation

NPM

npm install --save git+https://git@github.com/KevinBatdorf/liquidslider.git

then in your js file add

import 'liquidslider/js/jquery.liquid-slider.min.js'

The stylesheet is plain css, but you can load it in with sass

@import "node_modules/liquidslider/css/liquid-slider";

The manual way:

  1. Download the files to your working directory.
  2. Link files in the header and footer.
<head>
  <link rel="stylesheet" href="./dist/css/liquid-slider.css">
</head>
<body>
  <footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
    <script src="./dist/js/jquery.liquid-slider.min.js"></script>
  </footer>
</body>

How to use

Structure your html in a manner similar to below:

<section class="liquid-slider" id="main-slider">
  <div>
    <h2 class="title">Slide 1</h2>
    <p>Content</p>
  </div>
  <div>
    <h2 class="title">Slide 2</h2>
    <p>Content</p>
  </div>
</section>
  1. Initialize the content slider somewhere after the script.
jQuery(function($) {
  $('#main-slider').liquidSlider();
});

If you would like to edit a setting, do so like this:

jQuery(function($) {
  $('#main-slider').liquidSlider({
    setting: value,
    setting: value
  });
});

Default Settings

autoHeight: true,
minHeight: 0,
heightEaseDuration: 1500,
heightEaseFunction: 'easeInOutExpo',

slideEaseDuration: 1500,
slideEaseFunction: 'easeInOutExpo',
slideEaseFunctionFallback: 'swing',
animateIn: 'bounceInRight',
animateOut: 'bounceOutRight',
continuous: true,
fadeInDuration: 500,
fadeOutDuration: 500,

autoSlide: false,
autoSlideDirection: 'right',
autoSlideInterval: 6000,
forceAutoSlide: false,
pauseOnHover: false,

dynamicArrows: true,
dynamicArrowsGraphical: true,
dynamicArrowLeftText: '&#171; left',
dynamicArrowRightText: 'right &#187;',
hideSideArrows: false,
hideSideArrowsDuration: 750,
hoverArrows: true,
hoverArrowDuration: 250,

dynamicTabs: true,
dynamicTabsHtml: true,
includeTitle: true,
panelTitleSelector: '.title',
dynamicTabsAlign: 'left',
dynamicTabsPosition: 'top',
navElementTag: 'div',

firstPanelToLoad: 1,
hashLinking: false,
hashTitleSelector: '.title',

keyboardNavigation: false,
leftKey: 39,
rightKey: 37,
panelKeys: {
  1: 49,
  2: 50,
  3: 51,
  4: 52
},

responsive: true,
mobileNavigation: true,
mobileNavDefaultText: 'Menu',
mobileUIThreshold: 0,
hideArrowsWhenMobile: true,
hideArrowsThreshold: 0,
useCSSMaxWidth: 3000,

preload: function() {
  this.finalize();
},
onload: function() {},
pretransition: function() {
  this.transition();
},
callback: function() {},

preloader: false,
swipe: true,
swipeArgs: undefined

Versions

Version 2.3.8

  • Fixes bug with text arrows and no mobile nav

Version 2.3.7

  • Fixes compatability with Bootstrap

Version 2.3.6

  • Recalculates panel width based on container
  • Minor CSS update

Version 2.3.2

  • Fixes trim

Version 2.3.2

  • Updates examples
  • Fixes hashlink bug

Version 2.3.1

  • Updates for jQuery repo

Version 2.3.0

  • Adds bower
  • Uses px instead of %

Version 2.2.0

  • Fixes hash linking (new approach)
  • Uses API for cross links

Version 2.1

  • Fixes currentPanel bug
  • Switches to a new (better?) modular strategy
  • Switches license to MIT
  • Improves coding style
  • Sets focus/blur for autoslide
  • Fixes class for cross links
  • sanaziteNumber() -> sanitizeNumber() spelling fix
  • Fixes autoSlide pauseOnHover bug

Version 2.0.12

  • Adds currentPanel class to the current panel

Version 2.0.11

  • Had to revert a autoslide bug fix

Version 2.0.10

  • Fixes how RegEx works (hashLinking)
  • Fixes a bug when dynamic arrows is disabled (@joeworkman)
  • Adds a fallback for animate.css when css not supported (@joeworkman)
  • Fixes autoslide bug (@joeworkman)

Version 2.0.9

  • Fixes a few of the problems with cross links

Version 2.0.8

  • Changes the way the slider builds with fade

Version 2.0.7

  • Fixes swipe bug

Version 2.0.6

  • Fixes mobile width

Version 2.0.5

  • Updates touchSwipe and allows user to add options (not documented though)

Version 2.0.4

  • Changes how the slider downgrades to IE

Version 2.0.3

  • Fixes a bug that didn’t call pretransition when using animate.css

Version 2.0.2

  • Fixes a bug that loses menu names in select box when includeTitle:false

Version 2.0.1

  • Fixes auto height on resize bug

Version 2.0.0

  • Completely rebuilt from the ground up
  • New API
  • Faster, smaller, more flexible
  • Many, many new features

Version 1.3.7

  • Overhauls the cross linking functionality
  • Removes the hashCrossLinks setting.
  • Contributed by @joeworkman

Version 1.3.6

  • Fixes autoslide bug and callback functionality
  • Updates website on jquery repository

Version 1.3.5

  • Prepares code for new site launch
  • Fixes a bug when hover arrows is disabled

Version 1.3.4

  • Fixes a bug when using fade transitions
  • Allows crossLinks to control multiple sliders

Version 1.3.3

  • Fixes an autoslide bug

Version 1.3.2

  • Fixes a hashLinking bug

Version 1.3.1

  • Fixes a bug when using fade and swipe

Version 1.3.0

  • Fixes how the current class is applied when nesting sliders

Version 1.2.9

  • Fixes and updates the TouchSwipe settings and script

Version 1.2.8

  • Fixes the way the preloader works when continuous is off

Version 1.2.7

  • Fixes some bugs

Version 1.2.6

  • Fixes a few minor bugs.
  • Organizes code for upcoming custom build

Version 1.2.4 - 1.2.5

  • Pushes new version # to jQuery repository.

Version 1.2.3

  • Fixes a bug when using crosslinks on multiple sliders wont apply the current class properly.

Version 1.2.2

  • Fixes a bug where keyboard navigation fails.

Version 1.2.1

  • Removes the depreciated $.browser() call.
  • Fixes a bug when using hashNames that started the slider on the wrong panel.

Version 1.2.0

  • Adapts a new semantic versioning system
  • Adds touch functionality via touchSwipe (thanks @appzuka for recommending this plugin)
  • Removes jQuery and included only the link to the CDN
  • Replaces jQueryUI easing with the much lighter jQuery Easing plugin.

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了