Step viewer example(guideViewer)

Fixed height:Fixed to the specified value(In the example is 500px)

first step:This is the description of the first picture. Second step:This is the description of the second step image. third step:This is the description of the third step image. the fourth step:This is the description of the fourth step picture. the fifth step:This is the description of the fifth step picture.

Hahaha

Custom content test:)

Dynamic height:Automatically apply height based on image or content

first step:This is the description of the first picture. Second step:This is the description of the second step image. the fourth step:This is the description of the fourth step picture. the fifth step:This is the description of the fifth step picture.

Hahaha

Custom content test:)

Navigation on top

first step:This is the description of the first picture. Second step:This is the description of the second step image. third step:This is the description of the third step image. the fourth step:This is the description of the fourth step picture. the fifth step:This is the description of the fifth step picture.

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。