Search code examples
javascriptjqueryhtmlcssbxslider

bxSlider - placing divs inside the slider + text and background

I am using bxSlider.Basically the slider's structure is the following:

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

The slider works perfectly like that. The problem is that there are only images showing.If I add the code below between my <li></li>

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

That goes below or above the image, not fitting into slider. Should I use bxslider with divs instead , and placing the image as a background? like 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;
  }

But in that case , my background-image is not showing in full height , until I do not fill the container with enough text.So I want to achieve something like this enter image description here. So It is a bit confusing by now but, I want you to help me, should I use divs + background image to apply a text and some button on my slider picture , or there's another way using ul and li structure , thanks.

Solution

  • I tried out the first bit of code on my machine and it works out fine.

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

    I then tried the second

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

    And that worked fine too so unless i didn't understand your question. I have no clue. I think there might be a problem with the script or img srcs or you haven't shown enough code to properly debug.