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>

如何使bxSlider全屏显示图像？

1 个答案:

演示