如何自定义标题的bxlsider

Question

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

我已经添加了字幕：在javasript真正，但仍字幕是images.And外面我需要定制的字幕和替换它们作为文本的sliders.I附上下面的样本图像来解释我需要的。我也附加了我的代码。

我必须对我的代码做些什么更改才能获得像这样的标题。

<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标签与li列表项中的figcaption，但他们的工作。 （我想你可以添加一个跨度？..只是想到这一点）

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

带有标题文字的figcaption应包含在数字标签内。跨度标签应包括前收盘</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