• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How do I put captions on WowSlider?

Explorer ,
Mar 05, 2022 Mar 05, 2022

Copy link to clipboard

Copied

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/

Views

250

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 05, 2022 Mar 05, 2022

Copy link to clipboard

Copied

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 O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 05, 2022 Mar 05, 2022

Copy link to clipboard

Copied

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

 

Example:

image.png

 

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 06, 2022 Mar 06, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 06, 2022 Mar 06, 2022

Copy link to clipboard

Copied

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

 

D'oh

 

Thanks for your time

 

Gary

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 06, 2022 Mar 06, 2022

Copy link to clipboard

Copied

Gary,

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

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 06, 2022 Mar 06, 2022

Copy link to clipboard

Copied

quote

 

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 06, 2022 Mar 06, 2022

Copy link to clipboard

Copied

LATEST

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;
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 06, 2022 Mar 06, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines