Adding Captions below the image

120 views
Skip to first unread message

John Mwendwa

unread,
Dec 6, 2017, 10:47:11 AM12/6/17
to SlidesJS
Is it possible to add a <p> caption below each slide and how can I do it?
Message has been deleted

pat hn

unread,
Dec 8, 2017, 3:26:18 PM12/8/17
to SlidesJS

add to the <style> tag a class like "image" and set position = relative, add a second class "text", position = absolute...
finally declare the <img> tag to class="image" and a <span> to class="text"> and set the position.

in my case it looks like:
CSS in the <style>...</style>

.image {
    position
:relative;
    max
-width: 100%;
    background
-size: contain;
    background
-repeat: no-repeat;
    display
: block;
    margin
: auto; // center the picture
}
.text1 {
    position
: absolute;
    top
: 30%;
    left
: 37%;
    width
: 25%;
    z
-index: 2;
}
.text2 {
    position
: absolute;
    top
: 60%;
    left
: 37%;
    width
: 25%;
    z
-index: 2;
}


and in <div class="slides"> i added the folloing code:
<div id="slides">
     
<div>
         
<img class="image" src="../image1.jpg" />
         
<span id="first" class="text1">title</span>
         
<span id="second" class="text2">description</span>
     
</div>
     
<div>
         
<img class="image" src="../image2.jpg" />
         
<span id="first" class="text1">title</span>
         
<span id="second" class="text2">description</span>
     </div>
</div>



I hope it helps u to update ur slider.


Am Mittwoch, 6. Dezember 2017 16:47:11 UTC+1 schrieb John Mwendwa:

john chicago

unread,
Feb 18, 2018, 6:54:12 PM2/18/18
to SlidesJS
tried, but text/captain show above the image, but not under
Reply all
Reply to author
Forward
0 new messages