I don’t know if you already know about the Views Slideshow, probably you do. And you may also know that you can add different JQuery libraries to create various transition effects between your View items. But what you maybe don’t know is how to add a caption on top of your slides in case you want to create an image slideshow.

It is quite simple really, all you need to do is follow a few simple steps:

Create your View of the format: Slideshow and that displays your desired content. Make sure that the content type you choose has at least an image field and a text field which will represent the caption.

Then add you fields to the View, image and text field. Make sure that when you configure each of these fields you Exclude from display all the fields apart from the last.

Now, you have to rewrite the last field in the list. After checking the box Rewrite the output of this field, add the following code into the text box:

<div class="slideshow">
<div class="slideshow-image">[replacement-pattern-for-image]</div>
<div class="slideshow-caption">[replacement-pattern-for-caption]</div>
</div>

You will see below the replacement patterns. Make sure you use your replacement patterns for your fields. Then you can save your View. Of course you can go back to it anytime and improve it more to your liking as now it is quite basic.

Finally, to the CSS. Add the following css lines to your stylesheet:

.slideshow-image {
  position:relative;
}

.slideshow-caption {
  position:absolute;
  bottom:50px;
}

What this does is two simple things:

Makes the position of the image in the slideshow relative so that other elements can come on top and puts the caption text 50px higher. In effect, this makes the caption appear over the text. Here of course you should position your caption how you want, change color, background etc.

Hope this helps.