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>

idangerous swiper不在大显示器上工作

1 个答案: