如何在 swiper 更新時使幻燈片過渡更平滑而不是即時 - Swiper API

Question

我正在使用 Swiper API 創建一個移動友好的滑塊，但我需要找到一種方法來使 swiper.update() 方法平滑地重新定位幻燈片，而不是在刪除幻燈片時立即放置它們。

現在，當移除幻燈片並調用 swiper.update 來重新定位剩余的幻燈片時，它只會立即重新定位剩余的幻燈片。 我怎樣才能讓它以相同的方式運行，但幻燈片的重新定位更平滑？

Swiper API 鏈接： https ://swiperjs.com/swiper-api

Swiper 的初始化

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 的方法和屬性的情況下實現。 swiper 顯示幻燈片的方式是使用 flex display。 所以我設法通過使用以下 jsfiddle 代碼在刪除幻燈片時實現平滑過渡。

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 更新時使幻燈片過渡更平滑而不是即時 - Swiper API

問題描述

1 個解決方案

解決方案1
0 2021-10-21 07:43:32

如何在 swiper 更新時使幻燈片過渡更平滑而不是即時 - Swiper API

問題描述

1 個解決方案

解決方案1 0 2021-10-21 07:43:32

解決方案1
0 2021-10-21 07:43:32