jQuery slider / Posts /

Adding caption text for each image in the jQuery Slider

25
I have installed the software, the jQuery slider of the pure javascript version.

How i want to place text under each image? This is because i want to give a short brief of the images displayed.
Suha  11 years ago   viewed: 37810    

5 Answers

-6
Just add the caption element inside the <li> element. Please refer to the stylesheet code in the download package to see how they are styled. Also don't forget to give the caption a font-size as the slider's wrapper UL has been set font-size:0 that will be inherited by its children. For example:

HTML:

<li> <a class="thumb" href="img/2.jpg"></a> <div class="caption">Hello</div> </li>

CSS:

#thumbnail-slider .caption { padding: 6px 0; font-size: 20px; position: absolute; top: auto; bottom: 0px; color: white; background-color: rgba(0,0,0,0.5); text-align: center; width:100%; }
John
  11 years ago
-8
I would like to add text (not caption)below on every thumb ,how could it do? ,i tried adding text ,div below thumbnail ,but its not working ,any suggestions?
Uday
  7 years ago
4

The slider's CSS has set its wrapper, UL, font-size:0 that will be inherited by all its children. So you need to give your caption or text DIV the font size back such as font-size:16px;

Milo   7 years ago
0

Sorry guys, but I'm not so good in styling, can someone show me how he did it, cause I want to add a link with the name of the image, and I dont know exactly how, I added <p>, <a> and <div> element inside the li tag I put them font size 16px and color but they are not showing. I'm using the first demo slide horizontal one for thumbnails. Thank you

Teodor   6 years ago
0

Ups my fault its working but I need to give it margin top to my div, but the slider box height is a problem cause my text is hiding

Teodor   6 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲