Swiper JS 转换问题答案

【问题标题】：Swiper JS Transition issueSwiper JS 转换问题
【发布时间】：2023-01-18 07:21:19
【问题描述】：

我使用 swiper js 创建了滑块。我已经使用 css 实现了布局。但是当我尝试在图像上进行过渡时出现的问题没有给出适当的过渡效果

我已经使用 swiper js 创建了滑块 .. 但问题是当我将过渡添加到滑块然后过渡在我的代码中无法正常工作滑动器js 滑动器 css

<head>
    <style>
        .swiper-container {
            width: 100% !important;
            overflow: hidden;
        }

        .swiper-slide-active {
            width: 87.5% !important;
        }

        .swiper-slide-next,
        .swiper-slide-next+.swiper-slide {
            width: 5% !important;
            text-align: center;
            transition: none;
        }

        .swiper-slide img {
            max-width: 100%;
            height: 400px;
            object-fit: cover;
            border-radius: 5px;
        }

        .swiper-button-next:after,
        .swiper-button-prev:after {
            content: none;
        }

        .swiper-button-prev {
            left: -7px;
        }

        .swiper-button-next {
            right: -7px;
        }

        .swiper-button-next,
        .swiper-button-prev {
            align-items: center;
            width: 40px;
            height: 40px;
            cursor: pointer;
            background: #ffffff;
            box-shadow: 2px 4px 8px rgb(0 0 0 / 6%);
            border-radius: 50%;
            border: 1px solid #f0f0f0;
            color: #000;
        }

        /* .swiper-slide {
      transition: all 0.6s ease-in-out;
    } */
        .swiper-slide {
            transition: all 0.6s ease-in-out;
        }

        @media(max-width: 640px) {

            .swiper-slide-next,
            .swiper-slide-next+.swiper-slide {
                width: 10% !important;
                text-align: center;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>Swiper js with animation</h2>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div><img src="images/img2.webp" alt=""></div>
                        </div>
                        <div class="swiper-slide">
                            <div><img src="images/img3.webp" alt=""></div>
                        </div>
                        <div class="swiper-slide">
                            <div><img src="images/img4.webp" alt=""></div>
                        </div>
                        <div class="swiper-slide">
                            <div><img src="images/img5.webp" alt=""></div>
                        </div>
                        <div class="swiper-slide">
                            <div><img src="images/img6.webp" alt=""></div>
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </div>

    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"
        integrity="sha512-wdUM0BxMyMC/Yem1RWDiIiXA6ssXMoxypihVEwxDc+ftznGeRu4s9Fmxl8PthpxOh5CQ0eqjqw1Q8ScgNA1moQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 3,
            spaceBetween: 10,
            loop: true,
            slidesPerGroup: 1,
            watchSlidesProgress: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
                type: 'fraction',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // autoplay: {
            //   delay: 3000,
            //   disableOnInteraction: false,
            // },
            // Add cubic bezier animation
            transition: {
                duration: 6000,
                easing: 'cubic-bezier(0.93, 0.24, 0.74, 0.6)',
                runCallbacks: true
            },

        });
        var prevButton = document.querySelector('.swiper-button-prev');
        prevButton.innerHTML = '<i class="fa-solid fa-chevron-left"></i>';
        var nextButton = document.querySelector('.swiper-button-next');
        nextButton.innerHTML = '<i class="fa-solid fa-chevron-right"></i>';
    </script>
</body>

我想在滑块上平滑过渡

【问题讨论】：

标签： html jquery css slider swiper.js

【解决方案1】：

我们希望在此 codepen 示例中解决 SwiperJS 转换。您仍然需要进一步完善您的代码以适应您的特定目标。 codepen example。 Bootstrap：我们也尝试复制它（设置为“col-md-6 col-lg-4”），但在您的帖子中不知道 bootstrap 版本。在您的进一步改进中将不需要使用的某些代码（即 CSS .bk1）。在 SwiperJS 版本 #8 中，一些小脚本代码已从 .swiper-container 更改为 .swiper，这些差异可能会导致部分错误。

<script>
var swiper = new Swiper('.swiper', {
    slidesPerView: 3, ....
</script>

【讨论】：