时间戳

首页 > 解决方案 > Swiper滑块过渡错误

javascript - Swiper滑块过渡错误

问题描述

我正在尝试使用 vueawesome 滑块（基于 swiper 滑块）制作滑块。我试图让它看起来像这样

但是由于某种原因，当滑动器经过第一个循环时从第一个元素转到第二个元素时，动画不起作用。

过渡不是无缝的，它只是瞬间的。如果我删除所有自定义转换的东西并让它使用正常的 300 毫秒它工作正常。我完全不知道如何使它工作，我什至尝试使用coverflow效果但无济于事。我还尝试将动画放在内部容器而不是幻灯片元素本身上，但由于某种原因这也不起作用。

模板：

<swiper :options="swiperOption" ref="mySwiper">

    <!-- slides -->
    <swiper-slide class="swiper-1">
        <div class="inner">
            HELLOW 1
        </div>
    </swiper-slide>

    <swiper-slide>
        <div class="inner">
            HELLOW 2
        </div>
    </swiper-slide>

    <swiper-slide>
        <div class="inner">
            HELLOW 3
        </div>
    </swiper-slide>

    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
</swiper>

刷卡选项：

swiperOption: {
            loop: true,
            grabCursor: false,
            slidesPerView:'auto',
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
}

当前样式：

 .swiper-container {
    width: 100%;
    height: calc(100vh - 66px);
    padding-top: 100px;
    padding-bottom: 100px;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    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;
    width:80% !important;
    transform: scale(.8) !important;
    transition: all 1500ms cubic-bezier(.85,1.54,.97,1.07) !important; 
}
.swiper-slide.swiper-slide-active{
    transform: scale(1) !important;
}
.swiper-slide .inner{
    background:blue;
    width:100%;
    height:100%;
}

谁知道如何解决我的问题？

编辑当我尝试拖动滑动器以转到下一个滑块时，第一张幻灯片上出现了一个问题，它播放了两次过渡。

现场演示：这里（向下滚动通过标题）

先谢谢啦~

标签： javascriptcssvue.jscarousel

解决方案

我刚才遇到了同样的问题。经过一番研究，我发现这个解决方案可以解决我的问题。您还必须将 CSS 效果应用于活动的复制幻灯片。

所以这可能会解决你的问题：

.swiper-slide.swiper-slide-active,
.swiper-slide.swiper-slide-duplicate-active{
      transform: scale(1) !important;
}

推荐阅读