Can I display some text along each slide (as opposed to a caption)?

[Cervus]

I'd like to display a paragraph or two of text along each slide (e.g.
to the right of the picture). I suppose I should use the
"animationStart()" function to change the text, but then I'd need to
know which slide is being displayed, right?

If anyone has already implemented something like this, I'd truly
appreciate if they could give me a tip.

Cheers!

[Jeff Clausen]

I am interested in the answer to this question also. If you figure out
an answer please post it.

[Cervus]

OK, had to figure it out myself :-)
Just add the following string to the "animate" function:

// animate slides
function animate(direction, effect, clicked) {

...

document.getElementById('SomeElementToChange').innerHTML =
SomePredefinedArray[current];
}
} // end animate function

[Simon]

You mean here in the html page?

animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;

[Squalle]

I realize that it's been a long time since this question was asked. But I use this and I have gotten it to work with text along the right hand side. Here's what I did:

I replaced this:

<div id="slides">

   <img src="images/example-slide-1.jpg" />

   <img src="images/example-slide-2.jpg" />

   <img src="images/example-slide-3.jpg" />

   <img src="images/example-slide-4.jpg" />

 </div>

with this:

<div id="slides">

   <div class="sliderstuff">

      <img src="images/example-slide-1.jpg" />

      <span><p>Some text for the first image.</p></span>

   </div>

   <div class="sliderstuff">

      <img src="images/example-slide-2.jpg" />

      <span>Some text for the second image.</span>

   </div>

   <div class="sliderstuff">

      <img src="images/example-slide-3.jpg" />

      <span>Some text for the third image.</span>

   </div>

   <div class="sliderstuff">

      <img src="images/example-slide-4.jpg" />

      <span>Some text for the fourth image.</span>

   </div>

</div>

Then, in my stylesheet, add:

.sliderstuff img {

    float: left;

}

.sliderstuff span {

    float: left;

    width: 230px; /* CHANGE THIS TO THE WIDTH YOU WANT */

    text-align: justify;

    margin: 5px;

    font-family: Tahoma;

    font-size: 12px;

    font-weight: bold;

}

Oh, and I added this to the main div for the slideshow:

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

Hope this helps someone. And thanks to Nathan for the great slider!

Squalle