html - 危险的滑动器无法在大显示器上工作

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 x 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>