Skip to main content
T
Taffypro
Known Participant
March 6, 2022
Question

How do I put captions on WowSlider?

  • March 6, 2022
  • 3 replies
  • 636 views

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/

    This topic has been closed for replies.

    3 replies

    L
    Community Expert
    L e n aCommunity Expert
    Community Expert
    March 6, 2022

    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.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 6, 2022

    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.

     

    Nancy O'Shea— Product User & Community Expert
      T
      TaffyproAuthor
      Known Participant
      March 6, 2022

      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

      T
      TaffyproAuthor
      Known Participant
      March 6, 2022

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

       

      D'oh

       

      Thanks for your time

       

      Gary

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      March 6, 2022

      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
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices