如何在bxslider橫幅中添加文本？

Question

添加一些文字，但設計得到爆發

Answer 1

只需用CSS和添加內容的div，你可以做到這一點，像下面

$(document).ready(function(){ 
    $('.bxslider').bxSlider({ 
     mode: 'fade', 
    }); 
}); 

.bannerDetail { 
    color: #fff; 
    top: 38px; 
    left: 221px; 
    position: absolute; 
    font-size: 50px; 
} 

<ul class="bxslider"> 
    <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" /> 
    <div class="textDetail">Funky roots</div> 
    </li> 
    <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long and winding road" /> 
    <div class="textDetail">The long and winding road</div> 
    </li> 
    <li><img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" /> 
    <div class="textDetail">Happy trees</div> 
    </li> 
</ul> 

WorkingExanple：http://codepen.io/JoyCoder/pen/JYgzNL

Answer 2

你需要調用你的jQuery腳本的字幕選項。

$（'。bxslider'）。bxSlider（{ 字幕：真實 }）;

Answer 3

的bxSlider API具有captions選項：

$(function() { 
    var bx = $('.bxslider').bxSlider({ 
     captions: true 
    }); 
}); 

在需要標題的圖像上，使用title屬性。

<img src="image.png" title="This is a caption"/> 

http://bxslider.com/options#captions