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可能存在問題，或者您沒有顯示足夠的代碼來正確調試。