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 с divs вместо этого и помещать изображение в качестве фона? как 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; 
    } 

Но в этом случае, мой Фоновое изображение не отображается в полный рост, пока я не заполнить контейнер с достаточным количеством текста . Так что я хочу добиться чего-то подобного . Так что пока немного запутаться, но я хочу, чтобы вы мне помогли, я должен использовать divs + background image для применения текста и некоторой кнопки на моем слайдер-изображении, или есть другой способ, используя структуру 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 или вы не указали достаточно кода для правильной отладки.