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>