如何在bxSlider全屏制作图像？

Question

我是jQuery的新手，我第一次使用bxSlider插件。我正在尝试创建一个全屏滑块（图像将采取全屏幕）但我有一些问题，因为图片不会采取全屏幕，我不知道为什么。谁能帮我？到目前为止这是我的代码：

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>

Answer 1

将以下样式应用于每张幻灯片：

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

此外，您需要删除bxSlider选项：slideWidth和<hr>。 BTW <hr>是一个void元素，这意味着它没有结束标记 <hr>

---

演示

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>