idangerous swiper not working on big monitor

Question

我在着陆页上使用idangerous swiper来滑动5张图像。他们在我的笔记本电脑和其他几台电脑上工作良好但在我的办公大屏幕上，它显示了所有浏览器的图像之间的差距。我不知道为什么会发生这种情况。

 <div class="zawaj-slider swiper-container" style="height:550px;position:relative;"> 
     <div style="margin-left:0%; margin-top:0px;" class="swiper-wrapper"> 
    <div class="swiper-slide"> 
      <div class="swiper-slide orange-slide swiper-slide-visible" > 
       <img  alt="Zawaj Couple" src="images/models/north.jpg" /> 
      </div> 
     </div> 
      <div class="swiper-slide"> 
      <div class="swiper-slide orange-slide swiper-slide-visible" > 
       <img   alt="Zawaj Couple" src="images/models/marathi.jpg" /> 
      </div> 
    </div> 

Answer 1

有在下载的ZIP其名为02-responsive.html演示：

其在1920×1080的全宽工作完美

CSS：

.swiper-container { 
    width: 100%; 
    height: 100%; 
} 
.swiper-slide { 
    text-align: center; 
    font-size: 18px; 
    background: #fff; 

    /* Center slide text vertically */ 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    align-items: center; 
} 

JS：

<script> 
    var swiper = new Swiper('.swiper-container', { 
     pagination: '.swiper-pagination', 
     paginationClickable: true 
    }); 
    </script> 

HTML：

<!-- Swiper --> 
<div class="swiper-container"> 
    <div class="swiper-wrapper"> 
     <div class="swiper-slide">Slide 1</div> 
     <div class="swiper-slide">Slide 2</div> 
     <div class="swiper-slide">Slide 3</div> 
     <div class="swiper-slide">Slide 4</div> 
     <div class="swiper-slide">Slide 5</div> 
     <div class="swiper-slide">Slide 6</div> 
     <div class="swiper-slide">Slide 7</div> 
     <div class="swiper-slide">Slide 8</div> 
     <div class="swiper-slide">Slide 9</div> 
     <div class="swiper-slide">Slide 10</div> 
    </div> 
    <!-- Add Pagination --> 
    <div class="swiper-pagination"></div> 
</div> 

<!-- Swiper JS --> 
<script src="../dist/js/swiper.min.js"></script>