步骤查看器示例(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-*" 来设置选项。