# Step viewer example（guideViewer）

## Fixed height：Fixed to the specified value（In the example is 500px）

# Hahaha

Custom content test:)

## Dynamic height：Automatically apply height based on image or content

# Hahaha

Custom content test:)

## Navigation on top

# Hahaha

Custom content test:)

## Option

Option | Description
--- | ---
height | height，The default is 'auto'，You can specify a number to set a fixed height
navPos | Navigation location，default 'bottom'（Shown below），Can also be set to 'top' Set navigation above
lightbox | Whether to enable picture lightbox browsing，The default is 'false'，If set to `true`，Need image browsing plugin（$.fn.lightbox）activated
lang | Interface display language，Default auto setting
prevStep | Text displayed on the navigation：“Previous”
nextStep | Text displayed on the navigation：“Next step”
prevStepIcon | Icon displayed on the navigation：“icon-chevron-left”
nextStepIcon | Icon displayed on the navigation：“icon-chevron-right”
carousel | Set rotation options，For example, enable autoplay, etc.
slide | Whether to enable animation effects，The default is false

## Instructions

    <img data-guide-viewer="2" data-height="500" src="../img/img1.jpg" alt="first step：This is the description of the first picture.">
    <img data-guide-viewer="2" src="../img/img2.jpg" alt="Second step：This is the description of the second step image.">
    <img data-guide-viewer="2" src="../img/chanzhi_icon.png" alt="third step：This is the description of the third step image.">
    <img data-guide-viewer="2" src="../img/slide1.jpg" alt="the fourth step：This is the description of the fourth step picture.">
    <img data-guide-viewer="2" src="../img/img3.jpg" alt="the fifth step：This is the description of the fifth step picture.">
    <div data-guide-viewer="2" title="Custom content test">
        <div class="container">
            <h1>Hahaha</h1>
            <p>Custom content test:)</p>
        </div>
    </div>

Set properties for step elements that belong to the same group “data-guide-viewer=*”，And the values of the attributes are consistent。

Used on the first step element "data-*" To set options。