How do I move the caption for images above the bxSlider plugin for jQuery?

Question

Hope this question helps me and also helps others.

I have tried to find out how to add the caption above on the bxSlider plugin by going through the options page on the bxSlider options page several times, but I still can't figure out how to do it.

Can someone show me how to move the caption for the image above the bxSlider in the paragraph with id of "caption"?

HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Carousel with bxSlider</title>
    <link href="styles.css" type="text/css" rel="stylesheet">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-
    1.8.3.min.js"></script> 
    <script type="text/javascript" 
    src="https://www.dropbox.com/s/7897i3jwqsch931/jquery.bxSlider.min.js?
    dl=0">
    </script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#slider").bxSlider({
            displaySlideQty: 1,
            moveSlideQty: 1,
            default: false,
            randomStart: true,
            default: false,
            captions: true,
            default: false,
            pager: true,
            default: 'full',
            pagerType: 'short'



            }
    );
    });
    </script>
    </head>

    <body>
    <section>
    <h1>About Us</h1>
    <p>On June 6th, 2012, Vecta Corp. moved into its new 4 story, 35,000 
    square foot facilty. Below are a few pictures of the new facility.</p>
    <p id="caption"></p>
    <ul id="slider">
    <li><img 
    src="https://www.dropbox.com/s/7897i3jwqsch931/jquery.bxSlider.min.js?
    dl=0" title="Front of 
    building" width="200"></li>
    <li><img 
    src="https://www.dropbox.com/s/fk86wcu5bj4ju5v/building_02_thumb.jpg?
    dl=0" title="Left side of 
    building" width="200"></li>
        <li><img 
    src="https://www.dropbox.com/s/g2mqma07ealsyuj/building_03_thumb.jpg?
    dl=0" title="Rear of building" 
    width="200"></li>
        <li><img 
    src="https://www.dropbox.com/s/02l4dlxrq88tpdr/building_04_thumb.jpg?
    dl=0" title="Offices" 
    width="200"></li>
        <li><img 
    src="https://www.dropbox.com/s/oryb6c0hq9upn0l/building_05_thumb.jpg?
    dl=0" title="Conference room" 
    width="200"></li>
    </ul>
    <p id="pager"></p>
    </section>
    </body>
    </html>

CSS

    article, aside, figure, footer, header, nav, section {
    display: block;
    }
    body {
    font-family: Arial, Helvetica, sans-serif;
    width: 500px;
    margin: 0 auto;
    padding: 20px;
    border: 3px solid blue;
    }
    h1 {
    background: #dfe3e6 url('images/bullet.gif') no-repeat 7px center;
    margin: 0;
    padding: 3px 0 3px 25px;
    border: solid blue 1px;
    color: blue;
    }

    ul {
    overflow: hidden;
    padding: 0;
    margin-top: 7px;
    margin-bottom: 10px;
    text-align: center;
    }
    ul li {
    list-style: none;
    margin: 0;
    width:220px;
    }
    .bx-wrapper {
    margin: 0 auto;
    }
    .bx-prev {
    position: absolute;
    top: 77px;
    left: -35px;
    width: 31px;
    height: 31px;
    text-indent: -999999px;
    background: url(images/icon_arrow_left.png) no-repeat 0 -31px;
    }
    .bx-next {
    position: absolute;
    top: 77px;
    right: -35px;
    width: 31px;
    height: 31px;
    text-indent: -999999px;
    background: url(images/icon_arrow_right.png) no-repeat 0 -31px;
    }
    .bx-next: hover,
    .bx-prev: hover {
    background-position: 0 0;
    }
    #caption, #pager {
    color: blue;
    font-size: 90%;
    text-align: center;
    }
    #caption {
    font-weight: bold;  
    margin-bottom: 0;
    }
    #pager {
    margin-top: 0;
    }

Is it possible for you to insert the absolute url paths for your images, boxslider.js and jquery.js...So that we can see how the boxsilder is working and the caption your are trying to positioned below? — repzero, Apr 22 '17 at 18:14
I tried to use the css code you suggested but it didn't work. Maybe I need to edit the existing css code? — Sean V, Apr 22 '17 at 19:44

score 0 · Accepted Answer · edited May 23 '17 at 11:54

To have the bx-caption in the upper part of the image you can use this CSS that positions the caption below the top edge:

.bx-caption {
  text-align: center;
  top: 0;
  height: 2em;
  line-height: 1em;
}

$(document).ready(function() {
  $("#slider").bxSlider({
    displaySlideQty: 1,
    moveSlideQty: 1,
    default: false,
    randomStart: true,
    default: false,
    captions: true,
    default: false,
    pager: true,
    default: 'full',
    pagerType: 'short',

  });
});

.bx-caption {
  text-align: center;
  top: 0;
  height: 2em;
  line-height: 1em;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-
    1.8.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.css">
<section>
  <h1>About Us</h1>
  <p>On June 6th, 2012, Vecta Corp. moved into its new 4 story, 35,000 square foot facilty. Below are a few pictures of the new facility.</p>
  <p id="caption"></p>
  <ul class="bxslider" id="slider">
    <li><img src="http://lorempixel.com/380/240/?1" title="Front of 
    building" width="100%">
    </li>
    <li><img src="http://lorempixel.com/380/240/?2" title="Left side of 
    building" width="100%">
    </li>
    <li><img src="http://lorempixel.com/380/240/?3" title="Left side of 
    building" width="100%">
    </li>
  </ul>
  <p id="pager"></p>
</section>

For non-overlaying captions you can use

.bx-wrapper img {
  margin-top: 2em;
}

.bx-caption {
  position: relative;
  text-align: center;
  top: 0;
  height: 2em;
  line-height: 1em;
}

(demo)

How do I move the caption for images above the bxSlider plugin for jQuery?

1 Answers1