You can do it in this way:
HTML:
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img src="slide-1.jpg" /><!-- Your image/slide -->
<span>Description 1</span><!-- Your description -->
</li>
<li>
<img src="slide-2.jpg" /><!-- Your image/slide -->
<span>Description 2</span><!-- Your description -->
</li>
</ul>
</div>
CSS:
.slides {
position: relative;
}
.slides li span {
width: 500px;
height: 40px;
position: absolute;
bottom: - 50px;
}
You can position the slide li span
(description) where ever you want. Just change the positions of the element. If you want to place your description in relative to the body
then remove position: relatvie
from the .slides
.