<link href="css/mislider.css" rel="stylesheet">
<link href="css/mislider-custom.css" rel="stylesheet">
<script src="../lib/html5shiv/html5shiv.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/mislider.js"></script>

<ol class="mis-slider">
   <!-- slider 元素 - class是一個參數(shù)選項 -->
   <li class="mis-slide">
    <!-- 一個旋轉(zhuǎn)元素 - class是一個參數(shù)選項 -->
    <a href="#" class="mis-container">
     <!-- A slide container - this element is optional, if absent the plugin adds it automatically -->
     <figure>
      <!-- Slide content - whatever you want -->
      <img src="images/garden01.jpg" alt="Pink Water Lillies">
      <figcaption>Pink Water Lillies</figcaption>
     </figure>
    </a>
   </li>
   <li class="mis-slide">
    <a href="#" class="mis-container">
     <figure>
      <img src="images/garden02.jpg" alt="Pond with Lillies">
      <figcaption>Pond with Lillies</figcaption>
     </figure>
    </a>
   </li>
 </ol>

jQuery(function ($) {
   var slider = $('.mis-stage').miSlider({
    // The height of the stage in px. Options: false or positive integer. false = height is calculated using maximum slide heights. Default: false
    stageHeight: 380,
    // Number of slides visible at one time. Options: false or positive integer. false = Fit as many as possible. Default: 1
    slidesOnStage: false,
    // The location of the current slide on the stage. Options: 'left', 'right', 'center'. Defualt: 'left'
    slidePosition: 'center',
    // The slide to start on. Options: 'beg', 'mid', 'end' or slide number starting at 1 - '1','2','3', etc. Defualt: 'beg'
    slideStart: 'mid',
    // The relative percentage scaling factor of the current slide - other slides are scaled down. Options: positive number 100 or higher. 100 = No scaling. Defualt: 100
    slideScaling: 150,
    // 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. Default: 0
    offsetV: -5,
    // Center slide contents vertically - Boolean. Default: false
    centerV: true,
    // Opacity of the prev and next button navigation when not transitioning. Options: Number between 0 and 1. 0 (transparent) - 1 (opaque). Default: .5
    navButtonsOpacity: 1
   });
  });

 jQuery(function ($) {
   var slider = $('.mis-stage').miSlider({
    // 輪播圖過渡動畫的速度 
    // 單位毫秒. Options: positive integer.
    speed: 700,
    // 輪播圖在兩個過渡動畫之間的暫停時間 
    // in milliseconds. Options: false, positive integer. 
    // false = Autoplay off，設為false則不自動播放.
    pause: 4000,
    // 輪播圖的增量 
    // Autoplay and Nav Buttons. 自動播放與導航按鈕 
    // Options: positive or negative integer. 
    // Positive integer = Slide left. 正數(shù)向左
    // Negative integer = Slide right. 負數(shù)向右
    increment: 1,
    // 輪播圖的高度 
    // Options: false or positive integer. 值：false或正整數(shù)
    // false = height is calculated using 設為false自動計算高度
    // maximum slide heights.最大高度
    stageHeight: false,
    // 同時在屏幕上可見的輪播圖圖片數(shù)量
    // Options: false or positive integer. 值：false或正整數(shù)
    // false = Fit as many as possible. false為自適應
    slidesOnStage: 1,
    // 連續(xù)運動-輪播圖在同一個方向上無限循環(huán) 
    // true = slides loop in one direction if possible.
    slidesContinuous: true,
    // 當前輪播圖在屏幕上的位置：left, center, right 
    // Options: 'left', 'right', 'center'.
    slidePosition: 'left',
    // 輪播圖開始播放的位置. 
    // Options: 'beg', 'mid', 'end' 
    // or slide number starting at 1 - '1','2', etc.
    slideStart: 'beg',
    // 當前slide的寬度，單位px 
    // Options: false or positive integer. 值：false或正整數(shù)
    // false = width is the maximum of 設為false時為最大寬度
    // the existing slide widths.
    slideWidth: false,
    // 當前slide的縮放因子-其它圖片會相應縮小
    // of the current slide
    // other slides are scaled down. 
    // Options: positive number 100 or higher. 
    // 100 = No scaling.
    slideScaling: 100,
    // slide的垂直偏移
    // as a percentage of slide height. 
    // Options: positive or negative number. 
    // Neg value = up. Pos value = down. 
    // 0 = No offset.
    offsetV: 0,
    // slide中的內(nèi)容垂直居中
    // Boolean.
    centerV: false,
    // 原點導航按鈕是否可用
    // Boolean.
    navList: true,
    // 箭頭導航按鈕是否可用
    // Boolean.
    navButtons: true,
    // 箭頭導航一直顯示
    // except when transitioning - Boolean.
    navButtonsShow: false,
    // 箭頭導航按鈕的透明度 
    // button navigation when not transitioning. 
    // Options: Number between 0 and 1. 
    // 0 (transparent) - 1 (opaque).
    navButtonsOpacity: 0.5,
    // 輪播圖隨機順序
    // Boolean.
    randomize: false,
    // 輪播圖加載后的回調(diào)函數(shù)
    // called when slides have loaded.
    slidesLoaded: false,
    // 輪播圖過渡動畫前的回調(diào)函數(shù)
    // call back function - called before 
    // the slide transition.
    beforeTrans: false,
    // 輪播圖過渡動畫完成之后的回調(diào)函數(shù)
    // call back function - called at the end 
    // of a slide transition.
    afterTrans: false,
    // Stage元素上的class名稱
    // to the stage element.
    classStage: 'mis-stage',
    // The CSS class that will be Slider元素上的class名稱
    // applied to the slider element.
    classSlider: 'mis-slider',
    // The CSS class that will be 每一個Slide元素上的class名稱
    // applied to each slide element.
    classSlide: 'mis-slide',
    // The CSS class that will be 箭頭導航按鈕元素上的class名稱
    // applied to the parent of the 
    // prev and next button navigation elements.
    classNavButtons: 'mis-nav-buttons',
    // The CSS class that will be 圓點導航按鈕上的class名稱
    // 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 用于選擇每一個Slide的選擇器
    // each slide element
    // Descendant of the slider
    selectorSlide: 'li'
   });
  });