Swiper: wrong slider offset if active slider has different width

[ddtch]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Swiper Version: 5.4.5.
• Platform/Target and Browser Versions: macOS, Windows, CORDOVA, IOS, ANDROID, CHROME.
• Live Link or JSFiddle/Codepen or website with issue: https://codepen.io/dd-tch/full/WNxKdxW

I want to make a slider like at this picture

I expect that if I have defined width for the active slide, when I swiping next the proportions and ratio will always be correct, and the slide will be centered.

But instead, when I'm swiping, the further I swipe, the more and more offset is changing and slides are not centered

[ygj6]

@ddtch Add the following style, maybe could solve your problem.

    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;

[ddtch]

@ygj6 at what element add it?

[vltansky]

I tried to play with it, that's what I get:
https://stackblitz.com/edit/swiper-demo-18-nested-swipers-wshhsr?file=index.html

Is it works as you wanted @ddtch ?

[ygj6]

@ddtch I have modified your css file as follows, distinguished by //------------add. Is that what you wanted?

.main-slide {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%,rgba(0, 0, 0, 0.18) 100%),#2d2750;
    color: #fff;
    width: 22.5520833333%;
    height: 60%;
    border-radius: 6px;
    transition: all 0.3s ease;
    padding: 20px;
    display: flex;
    flex-flow: column;
    justify-content: center;//--------------------------------add
    align-items: center;//-----------------------------------add

    .inner {
        align-self: flex-end;
        width: 100%;
        margin-top: auto;
        display: flex;
        flex-flow: column;
        align-content: flex-end;
        opacity: 0.6;
        justify-content: center;//-------------------------add
        align-items: center;//-----------------------------add

        .title {
            font-size: 18px;
            margin-bottom: 20px;
        }


.swiper-slide .inner-slide {
    // width: 100% !important;

    //------------------------------------------------------------add
    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;
    //------------------------------------add
}


.inner-swiper-paging {
    margin-left: 30%;  //-----------------------------------------------add
    margin-bottom: 10px;
}

[ddtch]

@vltansky yes man, exactly what I wanted. slides per vew 3.5 )) nice trick

[vltansky]

I think issue can be closed?