Question

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

我在javasript中添加了字幕：true ，但字幕仍在图片之外。我需要自定义字幕并将其替换为幻灯片的文本。我附上了一个示例下面的图片来解释我需要什么。我也附上了我的代码。

我需要对代码进行哪些更改才能获得这样的字幕。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

背景颜色/填充/边距大小只是例如，根据您的需要进行编辑..

希望这有帮助

Fiddle

如何自定义bxlsider

1 个答案: