如何使滑动过渡更平滑而不是即时更新滑动器 - Swiper API

Question

我正在使用 Swiper API 创建适合移动设备的滑块，但我需要找到一种方法来使 swiper.update() 方法平滑地重新定位幻灯片，而不是立即将它们放在上面删除一张幻灯片。

现在，当删除幻灯片并调用 swiper.update 重新定位剩余幻灯片时，它只是立即重新定位剩余幻灯片。如何以相同的方式制作它运行但幻灯片的重新定位更顺畅？

Link 对于 Swiper API: https://swiperjs.com/swiper-api

刷卡器初始化

swiper = new Swiper(".mySwiper", {
    slidesPerView: 3,
    allowTouchMove: true,
    allowSlideNext: true,
    allowSlidePrev: true,
    spaceBetween: 5,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});

swiper.setTransition(this, 0.3);

编辑：根据要求，我创建了一个示例代码运行并重现了该问题。正如您在下面提供的代码中看到的那样，当您删除幻灯片时，重新定位剩余幻灯片的转换是即时的。我需要找到一种方法让它更顺畅。将剩余的幻灯片放置得更慢而不是立即。有办法吗？

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
        <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
        <style>
            html, body {
                padding: 0;
                margin: 0;
            }

            body {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }

            .swiper {
                width: 100%;
                height: 500px;
                margin-left: 10px !important;
                margin-right: 10px !important;
                box-sizing: border-box;
            }

            .swiper-slide {
                background-size: cover !important;
                border: 2px solid darkgray;
                box-sizing: border-box;
                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;
                transition: 0.3s all ease;
            }

            .swiper-slide img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .removeSlideBtn {
                margin-top: 50px;
                line-height: 30px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="swiper">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
              <!-- Slides -->
              <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>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
        </div>
        <button class="removeSlideBtn" onclick="RemoveSlide();">Remove Slide</button>
    </body>
    <script>
        var swiper = new Swiper(".swiper", {
            slidesPerView: 3,
            allowTouchMove: true,
            allowSlideNext: true,
            allowSlidePrev: true,
            spaceBetween: 5,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });

        swiper.setTransition(this, 300);

        function RemoveSlide() {
            var slide = Math.floor(Math.random() * swiper.slides.length);
            swiper.removeSlide(slide);
        }
    </script>
</html>

Answer 1

事实证明，它可以在不使用 API 的任何方法和属性的情况下实现。滑动器显示幻灯片的方式是使用 flex 显示。因此，我设法通过使用以下 jsfiddle 代码在删除幻灯片后实现了平稳过渡。

Link 对于 JsFiddle：https://jsfiddle.net/MadLittleMods/EM4xL/

<style>
.remove-item {
    flex: 1;
    -webkit-animation: flexShrink 500ms ease forwards;
    -o-animation: flexShrink 500ms ease forwards;
    animation: flexShrink 500ms ease forwards;
}

@keyframes flexShrink {
    to {
        flex: .01;
        flex: .00001;
    }
}

@keyframes flexGrow {
    to {
        flex: 1;
    }
}
</style>

<script>
    swiper.slides[i].classList.add('remove-item');                                    
    swiper.slides[i].addEventListener('animationend', function () {
        swiper.removeSlide(i);
    });
</script>

如何使滑动过渡更平滑而不是即时更新滑动器 - Swiper API

how to make slide transition smoother and not instant on swiper update - Swiper API

javascript

css

transition

swiperjs