javascript jquery jquery-plugins bxslider

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

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

Solution

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)