How do I put captions on WowSlider?

[Taffypro]

Hi,

I recently purchased WowSlider and its a cool program because it does a lot of the animation of slides.  However it doesn't give you a good option to put text over the slide show (captions).  I would love to put a  h2 tag (bottom center of the slide show), but for the life of me I cannot figure how to do this.  This is why I dislike pre-written code... grrrrrr

Here is a rough design of a slide show I am working on.  How can I put some text (centered, bottom) on top of the slide show?

Thanks for any help!!

Here is a link to my rough design:

http://taffyproductions.com/test/

[Nancy OShea]

I don't know if captions are supported from the WOW Slider UI.  You should consult WOW's documentation.

Of course, you could add text to images in Photoshop. That might be easier.

[Nancy OShea]

If you want to code this manually, you can add a <figure> and <figcaption> to each <li> element.  Style <figcaptions> with CSS.

Example:

HTML

<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><figure><img src="https://dummyimage.com/500x250" alt="#" title="#" id="wows1_0"/>
<figcaption>Caption goes here</figcaption>
</figure></li>
</ul>
</div>
</div>

CSS:

figure {
margin: 0;
padding: 0;
position: relative;
width:500px;
}
figcaption {
position: absolute;
bottom: 5%;
left:25%;
font-size:1.75em;
color:white;
background:rgba(0,0,0,0.40);
padding:1%
}

You may need to tweak the values a bit.  Also, I don't know if WOW will slide <figures>.  You'll need to test that on your end.

[Taffypro]

Hi Nancy,

I inserted the tags (figure/figcaption) as you instructed and it basically breaks the Wow-slider.  I also tried putting a period before the css ".figure" which doesn't seem to help.  So weird they don't include a good way to put titles in their slide show. I asume your code is written correctly so I might try your other idea (put them in one by one in Photoshop).  I just wish there was an easy way to do this in html.

Anyway I really appreciate your assistence with this.

Gary

[Taffypro]

I'm an idiot.... I just figured it out in Wowslider.....

D'oh

Thanks for your time

Gary

[Nancy OShea]

Gary,

What is WOW Slider's solution?  It might help other people with the same question.

[osgood_]

What is WOW Slider's solution?  It might help other people with the same question.

By @Nancy OShea

It partly uses the img 'title' tag as Lena says - additional lines of text can be added to the <li></li> tag - both heavily rely on the javascript to make it work.

[Taffypro]

WowSlider provides a lot of templets for text but you have limited ability to change them.  I found one that I like and am hoping to change it once WowSlider produces the CSS.  Basically I just want the text to be centered along the bottom.  Here is the CSS that WowSlider produces.

Thanks again,

Gary

#wowslider-container1 .ws_bullets {
bottom:1.5em;
left:50%;
}
#wowslider-container1 .ws_bullets div{
left:-50%;
}#wowslider-container1 .ws-title{
font: 1.3em 'Tenor Sans', Arial, Helvetica, sans-serif;
position: absolute;
left: 2em;
margin-right:10em;
z-index: 50;
background: none;
background-color:#1A2223;
color:#ffffff;
padding: 1em;
bottom: 40px;
top: auto;
opacity: 1;
}
#wowslider-container1 .ws-title div{
display:block;
margin-top:0.1em;
font-size: 1.3em;
line-height: 1.15em;
}
#wowslider-container1 .ws-title span{
font-size: 2em;
line-height: 1.35em;
text-transform:uppercase;
}#wowslider-container1 .ws_images > ul{
animation: wsBasic 95.2s infinite;
-moz-animation: wsBasic 95.2s infinite;
-webkit-animation: wsBasic 95.2s infinite;
}

[L e n a]

I'm not sure I understand what you want to do. So, at the risk of answering the wrong question, it seems to me that this library (WowSlider), like other libraries, used either the Alt attribute of the image or the Tittle attribute of the A tag that surrounds the image.

But I haven't used any slider's libs for a long time.