bxSlider - 滑块+文字和背景

Question

内放置的div我使用bxSlider.Basically滑块的结构如下：

<ul class="bxslider"> 
    <li> 
     <img src="img_1.png" alt="First"> 
    </li> 
    <li> 
     <img src="img_2.png" alt="Second"> 
    </li> 
    <li> 
     <img src="img_3.png" alt="Third"> 
    </li> 
</ul> 

滑块完美的作品那样。问题是，只有图像showing.If我添加下面的代码，我<li></li>

<div> 
     <h2> Hello World! </h2> 
</div> 

，下面或者上面的图片去之间，不配合到滑块。 我应该使用bxslider而不是div，并将图像作为背景？像 HTML：

<div class="bxslider"> 
    <div class="firstHolder"> 
     <div class="firstSection"> 
     <h2> Hello world</h2> 
      <p> Lorem ipsum dolor as simet ... </p> 
     </div> 
    </div> 

CSS：

.firstHolder{ 
    background-image:url(../img/img_1.png); 
    background-size:cover; 
    } 

但在这种情况下，我的背景图像不显示在全高，直到我不填充足够的文字容器。所以我想实现这样的事情 。所以，这是一个比较混乱的，但现在，我要你帮我，我应该使用的div +背景图像应用文本和一些按钮，滑块我的图片，或有使用ul和li结构，感谢的另一种方式。

Answer 1

我尝试了的代码在我的机器上的第一位，它工作了罚款。

<!-- jQuery library (served from Google) --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<!-- bxSlider Javascript file --> 
<script src="jquery.bxslider/jquery.bxslider.min.js"></script> 
<!-- bxSlider CSS file --> 
<link href="jquery.bxslider/jquery.bxslider.css" rel="stylesheet" /> 
<script> 

$(document).ready(function(){ 
    $('.bxslider').bxSlider(); 
}); 

</script> 
<ul class="bxslider"> 
    <li> 
     <img src="img1.png" alt="First"> 
    </li> 
    <li> 
     <img src="img2.png" alt="Second"> 
    </li> 
    <li> 
     <img src="img3.png" alt="Third"> 
     <div> 
     <h2>This is a test</h2> 
    </div> 
    </li> 
</ul> 

我又试图第二

<!-- jQuery library (served from Google) --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<!-- bxSlider Javascript file --> 
<script src="jquery.bxslider/jquery.bxslider.min.js"></script> 
<!-- bxSlider CSS file --> 
<link href="jquery.bxslider/jquery.bxslider.css" rel="stylesheet" /> 
<script> 

$(document).ready(function(){ 
    $('.bxslider').bxSlider(); 
}); 

</script> 

<div class="bxslider"> 
    <div class="firstHolder"> 
     <div class="firstSection"> 
     <h2> Hello world</h2> 
      <p> Lorem ipsum dolor as simet ... </p> 
     </div> 
    </div> 

<style> 

.firstHolder{ 
    background-image:url(img1.png); 
    background-size:cover; 
    } 
</style> 

这工作得很好也因此，除非我不明白你的问题。我没有任何线索。我认为脚本或img srcs可能存在问题，或者您没有显示足够的代码来正确调试。