bxSlider - 将div放在滑块+文本和背景中

Question

我正在使用bxSlider。基本上滑块的结构如下：

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

滑块完全像那样。问题是只显示图像。如果我在<li></li>

之间添加以下代码

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

低于或高于图像，不适合滑块。 我应该使用带有div的bxslider，并将图像作为背景放置吗？喜欢 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和{{1结构，谢谢。

Answer 1

我在我的机器上尝试了第一段代码，但效果很好。

@user_participations

然后我尝试了第二次

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

除非我不理解你的问题，否则这样做也很好。我没有线索。我认为脚本或img srcs可能存在问题，或者您没有显示足够的代码来正确调试。