javascript - 如何自定义 bxlsider 的标题

Question

我需要在 slider 的图像中添加标题，并且必须在单击相应的标题时移动每个 slider 。

我在 javasript 中添加了 captions: true，但标题仍然在图像之外。我需要自定义标题并将其替换为 slider 的文本。我附上了一个示例下图解释我需要什么。我也附上了我的代码。

我必须对我的代码做哪些更改才能获得这样的字幕。

<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li>
</ul>

<script>
    $(document).ready(function(){
        $('.bxslider').bxSlider();

    });

    $('.bxslider').bxSlider({
        mode: 'horizontal',
        infiniteLoop: true,
        auto: true,
        autoStart: true,
        autoDirection: 'next',
        autoHover: true,
        pause: 3000,
        autoControls: false,
        pager: true,
        pagerType: 'full',
        controls: true,
        captions: true,
        speed: 1200,
        slideWidth: 800
    });
</script>

Answer 1

你应该添加一个 figure带有 figcaption 的标签在你的li列出元素，但它们有效。 (我想你也可以添加一个跨度？..只是想到了)

如果您选择使用添加跨度，则需要添加 display:block;到CSS。

带有标题文本的 figcaption 应该包含在 figure 标签中。跨度标签应该在结束前包含 </li>

例如(我在这里使用了 figcaption)

$('.bxslider').bxSlider({
  auto: true,
  autoControls: true
});

* {
  margin: 0px;
  padding: 0px;
}

.bxslider li img {
  width: 200px;
  height: 125px;
  margin: 0px 5px;
  padding: 10px 3px;
}

.bxslider {
  list-style-type: none;
}

.bxslider li {
  display: inline-block;
}

figcaption {
  padding: 0!important;
  margin: 0!important;
  color: #2F4F4F;
  text-align: center;
  position: relative;
}

figure:hover,
figcaption:hover {
  color: forestgreen;
  background-color: yellow;
}

figure:active,
figcaption:active {
  color: forestgreen;
  background-color: blue;
}

<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
<script src="http://bxslider.com/js/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>

<ul class="bxslider">
  <li>
    <figure><img src="http://www.rachelgallen.com/images/daisies.jpg" />
      <figcaption>Daisies</figcaption>
    </figure>
  </li>
  <li>
    <figure><img src="http://www.rachelgallen.com/images/snowdrops.jpg" />
      <figcaption>Snowdrops</figcaption>
    </figure>
  </li>
  <li>
    <figure><img src="http://www.rachelgallen.com/images/mountains.jpg" />
      <figcaption>Mountains</figcaption>
    </figure>
  </li>
  <li>
    <figure><img src="http://www.rachelgallen.com/images/yellowflowers.jpg" />
      <figcaption>Yellow Flowers</figcaption>
    </figure>
  </li>
</ul>

背景颜色/填充/边距大小仅供引用，请按您认为合适的方式进行编辑..

希望对你有帮助

Fiddle