How to make the images in bxSlider full screen?

Question

I am new to jQuery and I'm using bxSlider plug-in for the first time. I am trying to create a full screen slider (the images will take the full screen) but I am having some problems since the pictures won't take the full screen and I don't know why. Can anyone help me? This is my code so far:

HTML

  <div class="bxslider">
  <div class="image-back" style="background-image:url(IMG/1.jpeg);">
    <hr class="top-bar"></hr>
    <h1 class="bounce">expert witness testimony</h1>
    <h3>think of it as informed clarity</h3>
  </div>

  <div class="image-back" style="background-image:url(IMG/2.jpeg);">
    <hr class="top-bar"></hr>
    <h1>expert witness testimony</h1>
    <h3>think of it as informed clarity</h3>
  </div>


  <div class="image-back" style="background-image:url(IMG/1.jpeg);">
    <hr class="top-bar"></hr>
    <h1>expert witness testimony</h1>
    <h3>think of it as informed clarity</h3>
  </div>

  <div class="image-back" style="background-image:url(IMG/2.jpeg);">
    <hr class="top-bar"></hr>
    <h1>expert witness testimony</h1>
    <h3>think of it as informed clarity</h3>
  </div>
  <div class="image-back" style="background-image:url(IMG/1.jpeg);">
    <hr class="top-bar"></hr>
    <h1>expert witness testimony</h1>
    <h3>think of it as informed clarity</h3>
  </div>
</div>

CSS

*{
  padding: 0;
  margin: 0;}
.image-back{
 height: 100vh;
 -webkit-background-size:cover;
  background-size: cover;
  background-position: center;
 }

JavaScript

<script type="text/javascript">
   $(function(){
     $('.bxslider').bxSlider({
        mode: 'fade',
        captions: true,
        slideWidth: 600
     });
   });</script>

Possible duplicate of [Making BXslider full screen (filling entire browser window)](https://stackoverflow.com/questions/26359620/making-bxslider-full-screen-filling-entire-browser-window) if not please edit your question to clearly indicate how your question differs from the previously asked question. — YourPalNurav, Mar 08 '19 at 13:59

zer00ne · Answer 1 · 2019-03-08T17:30:17.060

Apply the following styles to each slide:

.image-back {
  min-width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

In addition, you need to remove the bxSlider option: slideWidth and the <hr>. BTW <hr> is a void element which means it has no closing tag ~~<hr>~~

Demo

var bx = $('.bx-frame').bxSlider({
  mode: 'fade',
  adaptiveHeight: true
});

* {
  padding: 0;
  margin: 0;
}

.bx-main {
  width: 100%;
  height: auto;
}

.image-back {
  min-width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.title {
  color: goldenrod;
  font: 700 16px/1.2 Verdana;
  background: rgba(0,0,0,0.2)
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" />

<main class="bx-main">

  <section class='bx-frame'>
  
    <figure class="image-back" style='background-image: url(http://4.bp.blogspot.com/-kcn7Bx-Crvg/UnNBH9znY-I/AAAAAAAABI4/pGv2L2jQvVw/s1600/sunrise+Create+A+Fullscreen+Image+Background+Slideshow+Using+jQuery+And+HTML+For+Website+4.jpg);'> 
      <figcaption class='title'>
        <h1>H1 Main Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </figcaption>
    </figure>
 
    <figure class="image-back" style='background-image: url(https://w-dog.net/wallpapers/13/16/393560710349814/miscellaneous-track-stairs-degree-a-step-tree-red-background-wallpaper-widescreen-full-screen-hd-wallpapers-fullscreen.jpg'>
      <figcaption class='title'>
        <h1>H1 Main Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </figcaption>
    </figure>
 
    <figure class="image-back" style='background-image: url(https://png.pngtree.com/thumb_back/fw800/back_pic/04/27/76/03583c31515cbba.jpg)'>
        <figcaption class='title'>
        <h1>H1 Main Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </figcaption>
    </figure>
    
  </section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>

How to make the images in bxSlider full screen?

1 Answers1

Demo