bxSlider

Question

我正在使用 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;
  }

但在那种情况下，我的背景图像不会全高显示，直到我没有用足够的填充容器 text.So 我想实现这样的效果。所以现在有点混乱，但是，我希望你能帮助我，我应该使用 divs + 背景图像在我的滑块图片上应用文本和一些按钮，还是使用 ul 和 [=16 的另一种方法=]结构，谢谢。

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 可能有问题，或者您没有显示足够的代码来正确调试。

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

bxSlider - placing divs inside the slider + text and background

html

javascript

css

jquery