# 步骤查看器示例（guideViewer）

## 固定高度：固定为指定的值（示例中为 500px）

# 哈哈哈

自定义内容测试:)

## 动态高度：根据图片或内容自动应用高度

# 哈哈哈

自定义内容测试:)

## 导航在上面

# 哈哈哈

自定义内容测试:)

## 选项

选项 | 说明
--- | ---
height | 高度，默认为 'auto'，可以指定一个数字设置固定高度
navPos | 导航位置，默认 'bottom'（显示在下方），还可以设置为 'top' 将导航设置在上方
lightbox | 是否启用图片灯箱浏览功能，默认为 'false'，如果设置为 `true`，需要图片浏览插件（$.fn.lightbox）已启用
lang | 界面显示语言，默认自动设置
prevStep | 在导航上显示的文本：“上一步”
nextStep | 在导航上显示的文本：“下一步”
prevStepIcon | 在导航上显示的图标：“icon-chevron-left”
nextStepIcon | 在导航上显示的图标：“icon-chevron-right”
carousel | 设置轮播选项，例如启用自动播放等
slide | 是否启用动画效果，默认为 false

## 使用方法

    <img data-guide-viewer="2" data-height="500" src="../img/img1.jpg" alt="第一步：这是第一步图片的说明">
    <img data-guide-viewer="2" src="../img/img2.jpg" alt="第二步：这是第二步图片的说明">
    <img data-guide-viewer="2" src="../img/chanzhi_icon.png" alt="第三步：这是第三步图片的说明">
    <img data-guide-viewer="2" src="../img/slide1.jpg" alt="第四步：这是第四步图片的说明">
    <img data-guide-viewer="2" src="../img/img3.jpg" alt="第五步：这是第五步图片的说明">
    <div data-guide-viewer="2" title="自定义内容测试">
        <div class="container">
            <h1>哈哈哈</h1>
            <p>自定义内容测试:)</p>
        </div>
    </div>

为属于同一组的步骤元素设置属性 “data-guide-viewer=*”，并且属性的值一致。

在第一个步骤元素上使用 "data-*" 来设置选项。