使用调整 Swiper js 窗口大小时如何将图像向左对齐？答案

【问题标题】：How to align image to the left when uses resizes Swiper js window?使用调整 Swiper js 窗口大小时如何将图像向左对齐？
【发布时间】：2020-10-21 20:34:37
【问题描述】：

Swiper 是一个轮播插件。当用户调整窗口大小时，图像会逐渐从两侧裁剪，这很好，但是如何让它只从右侧裁剪，同时保持左侧不变呢？

这是 HTML：

<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0">

    <img src="img/double-room-1.jpg" 
    style="
        border-radius:10px; 
        width:100%; 
        height:100%;
        object-fit:cover;
        overflow:hidden;
    ">
    
</div>

以及对应的CSS：

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}

任何建议将不胜感激！

【问题讨论】：

标签： html css layout responsive-design swiper

【解决方案1】：

我通过将updateOnWindowResize: false 添加到 Swiper 脚本来做到这一点。所以现在看起来像这样：

<script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        spaceBetween: 0,
        updateOnWindowResize: false, //This one is added
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
    </script>

凌晨！

【讨论】：