Making Bxslider Full Screen (Filling Entire Browser Window)

Making BXslider full screen (filling entire browser window)

Here you are a full screen bxSlider + responsive. http://jsfiddle.net/0nj2ry4n/1/

First remove the images and make them background of the li elements.

<ul class="bxslider">
  <li style="background-image: url('http://bxslider.com/images/home_slides/hillside.jpg');"></li>
  <li style="background-image: url('http://bxslider.com/images/home_slides/houses.jpg');"></li>
  <li style="background-image: url('http://bxslider.com/images/home_slides/hillside.jpg');"></li>
  <li style="background-image: url('http://bxslider.com/images/home_slides/houses.jpg');"></li>
</ul>

Then add this css

*{
    margin: 0px;
    padding: 0px;
}
body, html{
    height: 100%;
}
.bx-viewport, .bx-wrapper{
    position:relative;
    width:100%;
    height:100% !important;
    top:0;
    left:0;
}
.bxslider, .bxslider li{
    height: 100% !important;;
}
.bxslider li{
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.bx-wrapper .bx-viewport{
    border: none !important;
}

And call bxSlider

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

BXslider full screen (reszing browser's window causes visual bugs)

Try this:

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

I tried it using developer tools on your site and it appears to be working. At least for resizing the slides.

Controling height of bxslider and bxsldier-pager

The bxsilder code calculates the height of the tallest image in its children. If you correctly size your images using something like Photoshop you should not have to modify the height at all.

Here is a snippet from the bxslider source code.

// if not "vertical" mode, calculate the max height of the children
height = Math.max.apply(Math, children.map(function() {
  return $(this).outerHeight(false);
}).get());

https://github.com/stevenwanderski/bxslider-4/blob/master/src/js/jquery.bxslider.js

bxSlider - placing divs inside the slider + text and background

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.

bxSlider cuts off slide viewing mobile

A friend of mine helped me get this working!

I have updated the fiddle: https://jsfiddle.net/785gcrnp/1/

var sm = 20;
var podcastSlider;

function podcastSettings() {
    var minmax;
    var win=$(window).width();

      if(win > 960) {
        minmax=3;
        var sw = 300;
      } else if(win > 660) {
        minmax=2;
        var sw = 300;
      } else {
        minmax=1;
        var sw = 480;
      }

      var sliderSettings={
        adaptiveHeight: true,
        infiniteLoop: false,
        maxSlides: minmax,
        mode: 'horizontal',
        nextSelector: '.next',
        nextText: 'Next',
        pager: false,
        prevSelector: '.prev',
        prevText: 'Prev',
        slideMargin: sm,
        slideWidth: sw
      };

      return sliderSettings;
    }

    $(window).resize(function() {
      podcastSlider.reloadSlider(podcastSettings());
    });

    $(document).ready(function(){
      podcastSlider = $('.podcast').bxSlider(podcastSettings());
    });

This will center the slides and only show the amount of slides that will be fully visible without cutting anything off.

This is also responsive, so if I resize the browser everything will update as it should.

In addition, I specified a different width for smaller screens.

I hope this helps someone else!

Thanks,

Josh

---

Related Topics