How to change slide order in impress js

Question

I would like to change my slide order in impress.js. But I am unable to do it by just adding a Is there a way to do this?

My code looks like below

<!--slide 1-->
<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
    <span class="try">How to perform</span> <br/>
    <h1>A Soft Handover</h1>
    <span class="footnote">in Mobile Networks</span>
</div>

<!--slide 2-->
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
    <h2 style="font-size:72px">What is a soft handover?</h2>
    <p style="font-size:40px;text-align:justify">When a mobile station moves from one base station's coverage to another's during an existing call, the base stations transfer services between each other to keep the call alive. 
    </p>
</div>

<!--slide 3-->
<div id="its" class="step" data-x="-3500" data-y="4000" data-rotate="180" data-scale="6">
    <h2 style="font-size:72px">What is a?</h2>
    <p style="font-size:40px;text-align:justify">When a mobile station moves from one base station's coverage to another's during an existing call, the base stations transfer services between each other to keep the call alive. 
    </p>
</div>

Thanks in advance.

Answer 1

impress.js slides are ordered by the order in which your 'step' divs appear in the html. So, you just have to move them in your html file to re-order.

This initial order allows you to do impress().goto(index) where index is 0 for the first slide, 1 for the second and so on.

If you want to dynamically change the order in which your javascript visits these slides you can call impress().goto(index) for desired index if you are using a javascript file to control transitions between slides.

edit: I realise this question is almost a year old, but for anyone else using impress.js, you may find this link useful https://gist.github.com/lavallee/2340157