元素来包裹。

注意：上面的class并不是必须的，如果不写这些class，插件会自动为相应的元素添加class。默认情况下，该轮播图插件使用的是有序列表的结构，如果你使用不同的元素结构，请确保要修改selectorSlider和selectorSlide选项。

调用插件

在页面加载完毕之后可以使用下面的方法来初始化该轮播图插件：

jQuery(function ($) {

var slider = $('.mis-stage').miSlider();

});

注意：要确保.mis-stage jQuery选择器和HTML页面中的轮播图容器的class名称相同。

配置参数

下面是该轮播图插件可以被定制的参数：

轮播图过渡动画的速度

轮播图在两个过渡动画之间的暂停时间

轮播图的增量

轮播图的高度

同时在屏幕上可见的轮播图图片数量

连续运动-轮播图在同一个方向上无限循环

当前轮播图在屏幕上的位置-left, center, right

轮播图是否自动开始播放

当前slide的宽度

当前slide的缩放因子-其它图片会相应缩小

slide的垂直偏移

slide中的内容垂直居中

原点导航按钮是否可用

箭头导航按钮是否可用

箭头导航按钮的透明度

轮播图的随机顺序

轮播图加载后的回调函数

轮播图过渡动画前的回调函数

轮播图过渡动画完成之后的回调函数

Stage元素上的class名称

Slider元素上的class名称

每一个Slide元素上的class名称

箭头导航按钮元素上的class名称

圆点导航按钮上的class名称

用于选择轮播图的选择器

用于选择每一个Slide的选择器

默认参数配置：

jQuery(function ($) {

var slider = $('.mis-stage').miSlider({

// The speed of the slide transition

// in milliseconds. Options: positive integer.

speed: 700,

// slide pause time between transitions

// in milliseconds. Options: false, positive integer.

// false = Autoplay off.

pause: 4000,

// The number of slides to increment with

// Autoplay and Nav Buttons.

// Options: positive or negative integer.

// Positive integer = Slide left.

// Negative integer = Slide right.

increment: 1,

// The height of the stage in px.

// Options: false or positive integer.

// false = height is calculated using

// maximum slide heights.

stageHeight: false,

// Number of slides visible at one time.

// Options: false or positive integer.

// false = Fit as many as possible.

slidesOnStage: 1,

// Continuous motion - Boolean.

// true = slides loop in one direction if possible.

slidesContinuous: true,

// The location of the current slide on the stage.

// Options: 'left', 'right', 'center'.

slidePosition: 'left',

// The slide to start on.

// Options: 'beg', 'mid', 'end'

// or slide number starting at 1 - '1','2', etc.

slideStart: 'beg',

// The width of the current slide in px.

// Options: false or positive integer.

// false = width is the maximum of

// the existing slide widths.

slideWidth: false,

// The relative percentage scaling factor

// of the current slide

// other slides are scaled down.

// Options: positive number 100 or higher.

// 100 = No scaling.

slideScaling: 100,

// The vertical offset of the slide center

// as a percentage of slide height.

// Options: positive or negative number.

// Neg value = up. Pos value = down.

// 0 = No offset.

offsetV: 0,

// Center slide contents vertically

// Boolean.

centerV: false,

// Enable numbered list navigation

// Boolean.

navList: true,

// Enable prev and next button navigation

// Boolean.

navButtons: true,

// Always show prev and next button navigation

// except when transitioning - Boolean.

navButtonsShow: false,

// Opacity of the prev and next

// button navigation when not transitioning.

// Options: Number between 0 and 1.

// 0 (transparent) - 1 (opaque).

navButtonsOpacity: 0.5,

// Randomize the order of the slides

// Boolean.

randomize: false,

// The slides loaded call back function

// called when slides have loaded.

slidesLoaded: false,

// The slide transition before

// call back function - called before

// the slide transition.

beforeTrans: false,

// The slide transition complete

// call back function - called at the end

// of a slide transition.

afterTrans: false,

// The CSS class that will be applied

// to the stage element.

classStage: 'mis-stage',

// The CSS class that will be

// applied to the slider element.

classSlider: 'mis-slider',

// The CSS class that will be

// applied to each slide element.

classSlide: 'mis-slide',

// The CSS class that will be

// applied to the parent of the

// prev and next button navigation elements.

classNavButtons: 'mis-nav-buttons',

// The CSS class that will be

// applied to the parent of the

// numbered list navigation elements

classNavList: 'mis-nav-list',

// The selector used to select

// the slider element

// Descendant of the stage

selectorSlider: 'ol',

// The selector used to select

// each slide element

// Descendant of the slider

selectorSlide: 'li'

});

});

样式设置

你如果想自定义该轮播图的样式，可以创建一个mislider-custom.css的新样式表，然后在这个文件中添加你自己的样式。该轮播图插件默认使用下面的class名称：

mis-stage：可见区域的容器的class名称。

mis-slider：用于移动轮播图的 slide 容器元素。

mis-slide：每一个 slide 元素。

mis-container：有插件自动插入的容器元素。用于包裹每一个slide 元素。

mis-nav-buttons：前后箭头导航按钮的图片。

mis-nav-list：圆点导航按钮。