How to make BX Slider full screen

In this post, I will explain how to apply BX Slider in your theme and make it full window and apply it in the header of your site. It seemed a rather important piece of information since BX Slider is a rather popular slider for use in WordPress themes and I could not find much info on this topic as well.

Just found this Q&A on www.stackoverflow.com. My technique is similar but there are a few minor changes.

So, firstly, you need to integrate BX Slider in the theme. You can follow the guide provided on www.bxslider.com. The main difference lies in the CSS.

Here is the HTML markup for the slider-

<div id="slider-wrapper">
 <ul class="bxslider">
  <li style="background-image: url('http://abc.com/images/image1.jpg');"></li>
  <li style="background-image: url('http://abc.com/images/image2.jpg');"></li>
  <li style="background-image: url('http://abc.com/images/image3.jpg');"></li>
  <li style="background-image: url('http://abc.com/images/image4.jpg');"></li>
 </ul>
</div>

NOTE – The images need to be added as background to the li elements, otherwise images keep on taking full width of the window .

Now, onto the CSS part.

 

#slider-wrapper ul {
margin: 0px;
}

.bx-viewport, .bx-wrapper{
position:relative;
width:100%;
height:100% !important;
top:0;
left:0;
}

.bxslider, .bxslider li {
height: 100vh !important;;
}

.bxslider li {
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}

The CSS seems pretty straight forward. Firstly, the wrapper (.bx-wrapper)needed to cover whole of the screen.

After that, the elements needed to cover the whole screen no matter what size. Hence, I used 100vh as the height.

(NOTE – vh is viewport height and is introduced in CSS3, so it may cause compatibility issues on older machines).

After that, it all seems pretty easy.

You need to call the BX Slider using jQuery as well.

$(document).ready(function(){
   $('.bxslider').bxSlider({
   });
});

Just remember, whatever you use as a class or ID of the ul in the markup, use only that while calling bxslider() in the jQuery code.

So, this is it! You should have your full screen BX Slider fully adaptable to your browser window. It provides for a great header of a theme.

You may also like..

3 thoughts on “How to make BX Slider full screen

  1. Hi Divjot

    I have just installed you ving theme and was wondering if you could help me please. When I click on my categories link I have this message OOPS NOTHING AVAILABLE HERE but when I click on the box I get my articles. Is there some way I can change the message.

Leave a Reply

Your email address will not be published. Required fields are marked *