javascript - Swiper slider transition bug - Stack Overflow

admin 管理员组

文章数量: 1086019

I'm trying to make a slider using vueawesome slider (based on swiper slider). I'm trying to make it to look like this

However for some reason the animation doesnt work when the swiper goes from the first element to the second element when it is past the first loop.

The transition is not seamless, it is just instant. If i remove all custom transition stuff and have it use the normal 300ms one it works fine. I've absolutely got no idea how to make it work and I've even tried using the coverflow effect but to no avail. I've also tried putting the animation on an inner container instead of the slide element itself but that just doesn't work either for some reason.

Template:

<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>

Swiperoptions:

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

Current styling:

 .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%;
}

Anyone who has any idea how to fix my issue?

EDIT When i try to drag the swiper to go to the next slider there is an issue on the first slide where it plays the transition twice.

Live demo: here (scroll down passed the header)

Thank you in advance~

I'm trying to make a slider using vueawesome slider (based on swiper slider). I'm trying to make it to look like this

However for some reason the animation doesnt work when the swiper goes from the first element to the second element when it is past the first loop.

The transition is not seamless, it is just instant. If i remove all custom transition stuff and have it use the normal 300ms one it works fine. I've absolutely got no idea how to make it work and I've even tried using the coverflow effect but to no avail. I've also tried putting the animation on an inner container instead of the slide element itself but that just doesn't work either for some reason.

Template:

<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>

Swiperoptions:

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

Current styling:

 .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%;
}

Anyone who has any idea how to fix my issue?

EDIT When i try to drag the swiper to go to the next slider there is an issue on the first slide where it plays the transition twice.

Live demo: here (scroll down passed the header)

Thank you in advance~

• javascript
• css
• vue.js
• carousel

Share Improve this question Follow edited Jul 20, 2019 at 14:12 Ajithraj 52855 silver badges1515 bronze badges asked Jul 20, 2019 at 13:49 EllisanEllisan 57311 gold badge99 silver badges2222 bronze badges 1

• Hi! Did u solve this? I have the same issue. When the loop start again, the first slide doent make the transition when i swipe to the second slide. I think is related with the duplicate slides, but i dont know how to solve it. – Jose Commented Sep 11, 2020 at 22:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I met the same issue just now. After some research, I found this solution to solve my problem. You have to apply the CSS effect to the active duplicate slide also.

So this might solve your problem:

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

I had definition of cssMode in the swiper initialization, when I removed it - the animation returned back.

本文标签： javascriptSwiper slider transition bugStack Overflow