Each line of the of the script should on a single line.
Each slide starts with <div class="slide"> and ends with </div>
Each element of the slide has a starting tag of <img or <p
<img is an image element
src is where the image can be found
data-position the position top/left on the image for this element in px
top is the offset from the top of the slider, left is the offset from the left edge of the slider
data-in / data-out The animation used to display and hide the element
fade, none, left, topLeft, bottomLeft, right, topRight, bottomRight, top, bottom
data-delay Time in ms before the transition starts in the current step
data-step You can group your elements in different steps. All animation of a step will start at the same, delays by the data-delay value, the elements in the next step will not start until the previous step is complete.
<p is a text element
Text elements are the same as for img elements except they lack a src. The Text element takes a class which allows for styling instead.
The supplied sample.
<div class="slide">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/bookcover.png" data-position="0,0" data-in="fade" data-delay="0" data-out="fade">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/ripawc.png" data-position="0,0" data-in="fade" data-step="1" data-delay="500" data-out="Top">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/Front Cover ghost.png" data-position="0,0" data-in="left" data-step="2" data-delay="1000" data-out="bottomLeft">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/title text1A GhostSpell.png" data-position="0,0" data-in="bottom" data-step="3" data-delay="1000" data-out="Left">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/title2 Awc Haunting return.png" data-position="0,0" data-in="bottom" data-step="3" data-delay="1500" data-out="left">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/Front Cover s.png" data-position="0,0" data-in="bottom" data-step="3" data-delay="2000" data-out="TopLeft">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/Front Cover cm.png" data-position="0,0" data-in="right" data-step="4" data-delay="1000" data-out="BottomRight">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/maltherepub.png" data-position="0,0" data-in="top" data-step="5" data-delay="1500" data-out="Right">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/Back Cover Text1.png" data-position="0,0" data-in="bottom" data-step="6" data-delay="2000" data-out="TopRight">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/Back Cover Text btsa.png" data-position="0,0" data-in="bottom" data-step="7" data-delay="1000" data-out="TopRight">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/Back Cover Text2.png" data-position="0,0" data-in="bottom" data-step="8" data-delay="2000" data-out="TopRight">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/Back Cover Text3.png" data-position="0,0" data-in="bottom" data-step="10" data-delay="2000" data-out="TopRight">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/Back Cover apoc.png" data-position="0,0" data-in="bottom" data-step="11" data-delay="2000" data-out="TopRight">
</div>
<div class="slide">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/raisingit/raisingit-666-background.png" data-position="0,0" data-in="fade" data-delay="0" data-out="fade">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/raisingit/raisingit-figure2.png" data-position="0,350" data-in="top" data-step="1" data-delay="500" data-out="bottomRight">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/raisingit/raisingit-figure3.png" data-position="0,350" data-in="top" data-step="1" data-delay="1500" data-out="bottomRight">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/raisingit/raisingit-figure1.png" data-position="0,350" data-in="bottom" data-step="1" data-delay="2500" data-out="bottomRight">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/raisingit/Back-Cover-Text1.png" data-position="0,0" data-in="bottom" data-step="4" data-delay="2500" data-out="bottomRight">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/raisingit/Back-Cover-Text2.png" data-position="0,0" data-in="bottom" data-step="5" data-delay="2000" data-out="bottomRight">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/raisingit/Back-Cover-Text3.png" data-position="0,0" data-in="bottom" data-step="6" data-delay="2000" data-out="bottomRight">
<p class="claim transparant small" data-position="30,30" data-in="top" data-step="2" data-out="top">Raising IT-666</p>
<p class="claim transparant small" data-position="90,30" data-in="left" data-step="3" data-delay="500">The Teenage Beast</p>
<p class="fsblock transparant small" data-position="120,30" data-in="bottom" data-step="3" data-delay="1500">Book Two</p>
<p class="fsblock transparant small" data-position="150,30" data-in="bottom" data-step="3" data-delay="2500">Cordelia Malthere</p>
</div>
<div class="slide">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/findingit/finding it-666 background image.jpg" data-position="0,0" data-in="fade" data-delay="0" data-out="fade">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/findingit/frontfigure3.png" data-position="0,350" data-in="top" data-step="1" data-delay="500" data-out="bottomRight">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/findingit/frontfigure2.png" data-position="0,350" data-in="top" data-step="1" data-delay="1500" data-out="bottomRight">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/findingit/frontfigure1.png" data-position="0,350" data-in="bottom" data-step="1" data-delay="2500" data-out="bottomRight">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/findingit/Back-Cover-Text1.png" data-position="0,0" data-in="bottom" data-step="4" data-delay="2500" data-out="bottomRight">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/findingit/Back-Cover-Text2.png" data-position="0,0" data-in="bottom" data-step="5" data-delay="2000" data-out="bottomRight">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/findingit/Back-Cover-Text3.png" data-position="0,0" data-in="bottom" data-step="6" data-delay="2000" data-out="bottomRight">
<p class="claim transparant small" data-position="30,30" data-in="top" data-step="2" data-out="top">Finding IT-666</p>
<p class="claim transparant small" data-position="90,30" data-in="left" data-step="3" data-delay="500">The Beast</p>
<p class="fsblock transparant small" data-position="120,30" data-in="bottom" data-step="3" data-delay="1500">Book One</p>
<p class="fsblock transparant small" data-position="150,30" data-in="bottom" data-step="3" data-delay="2500">Cordelia Malthere</p>
</div>
<div class="slide">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/background.png" data-position="0,0" data-in="fade" data-delay="0" data-out="fade">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/moon.png" data-position="0,0" data-in="fade" data-step="1" data-delay="500" data-out="bottomRight">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/coffin.png" data-position="0,0" data-in="top" data-step="2" data-delay="1000" data-out="bottomLeft">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/title1.png" data-position="0,0" data-in="bottom" data-step="3" data-delay="1000" data-out="Left">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/title2.png" data-position="0,0" data-in="bottom" data-step="3" data-delay="1500" data-out="left">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/title3.png" data-position="0,0" data-in="bottom" data-step="3" data-delay="2000" data-out="TopLeft">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/text1.png" data-position="0,0" data-in="right" data-step="4" data-delay="1000" data-out="BottomRight">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/text2.png" data-position="0,0" data-in="top" data-step="4" data-delay="1500" data-out="Right">
<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/text3.png" data-position="0,0" data-in="bottom" data-step="4" data-delay="2000" data-out="TopRight">
</div>