如何将图像的标题移动到 jQuery 的 bxSlider 插件上方？

Question

希望这个问题对我有帮助，也对其他人有帮助。

我试过多次浏览bxSlider选项页面的选项页面，想知道如何在bxSlider插件上添加上面的标题，但我仍然不知道该怎么做。

有人可以告诉我如何将图像的标题移动到 ID 为 "caption" 的段落中的 bxSlider 上方吗？

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

Answer 1

要使 bx-caption 在图像的上部，您可以使用此 CSS 将标题定位在顶部边缘以下：

.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>

对于 non-overlaying 个字幕，您可以使用

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

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

(demo)

如何将图像的标题移动到 jQuery 的 bxSlider 插件上方？

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

javascript

jquery

jquery-plugins

bxslider