Как сделать изображения в bxSlider на весь экран? - PullRequest
Новая
       15

Как сделать изображения в bxSlider на весь экран?

0 голосов
/ 08 марта 2019

Я новичок в 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>

1 Ответ

0 голосов
/ 08 марта 2019

Примените следующие стили к каждому слайду: 

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

Кроме того, необходимо удалить параметр bxSlider : slideWidth и <hr>. КСТАТИ <hr> является пустым элементом, что означает, что он не имеет закрывающего тега <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>
...