nivo slider - add text to the slider

Question

I am currently using the nivo slider on my homepage, to show different images. It works perfectly. Although, next to the images there are some text, which I would like to follow

Answer 1

See this demo, they have captions.

Answer 2

<div id="slider" class="nivoSlider">
 <div class="slide slide_0">
   <img class="slide-image" src='img1.png' width="100%"  title="#htmlcaption_0">
 </div>
 <div class="slide slide_1">
   <img class="slide-image" src='img2.png' width="100%"  title="#htmlcaption_1">
 </div>
 <div class="slide slide_2">
   <img class="slide-image" src='img3.png' width="100%"  title="#htmlcaption_2">
 </div>
</div>

<div id="htmlcaption_0" class="nivo-html-caption">
 <h1 class="slide-h1">Title</h1>
 <h2 class="slide-h2">Description</h2>
 <h3 class="slide-h3">
   <a href="#" title="">Learn More &raquo;</a>
 </h3>
</div>
<div id="htmlcaption_1" class="nivo-html-caption">
 <h1 class="slide-h1">Title</h1>
 <h2 class="slide-h2">Description</h2>
 <h3 class="slide-h3">
   <a href="#" title="">Learn More &raquo;</a>
 </h3>
</div>
<div id="htmlcaption_2" class="nivo-html-caption">
 <h1 class="slide-h1">Title</h1>
 <h2 class="slide-h2">Description</h2>
 <h3 class="slide-h3">
   <a href="#" title="">Learn More &raquo;</a>
 </h3>
</div>

Here's my css:

.nivo-caption {
  color: #FFFFFF;
  min-width: 550px;
  overflow: hidden;
  position: absolute;
  top: 180px;
  z-index: 8;
}

.nivo-html-caption {
  display:none;
}

Hope this helps.

Answer 3

Put your text in the title and then you can make css changes to class nivo-caption, for example try giving width and float.

.nivo-caption{width:40px;float:right;}

Or else you can switch to other slider sorry.

Here is link is this what you looking for?

Answer 4

Use title attribute in the <img /> to define text to appear as caption in the slider.

---

Lets see an example:

<div id="slider" class="nivoSlider">
    <img src="images/slide1.jpg" alt="" />
    <img src="images/slide2.jpg" alt="" title="#htmlcaption" />
                                             <!-- ^ This is one way to bring caption -->
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
                                             <!-- ^ This is ANOTHER way -->
</div>

<!-- This part of caption is called from the second image link above see  `#htmlcaption` there -->
<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

---

Update

Without hacking the code, you can override the default class to appear as a separate text box.

Find .nivo-caption style and make some changes to it

.nivo-caption { 
       width: 200px; 
       height: 250px; 
       left: -200px; /* same as the width */
 }

Update 2

Here is a demo with your slider working with the workaround i mentioned.

SO far as this question goes, this is where i stop. Hope it helps.