Center mode with two slides not working

[vedmant]

Center mode with two slides shows no slides at all, they are moved to the left "width: 970px; opacity: 1; transform: translate3d(-1455px, 0px, 0px);" when it should be 0 instead of -1455px

[ctfdavis]

hi @vedmant

Thank you for reporting. Could you share your settings for my reproduction? FYI, I have tried the below setting, but couldn't reproduce the issue you described:

<script setup lang="ts">
import { VSlickCarousel } from '@lib/index'
import { Settings } from '@lib/types'
const settings: Settings = {
  dots: true,
  centerMode: true,
  infinite: false
}
</script>

<template>
  <div class="wrapper">
    <VSlickCarousel v-bind="settings">
      <div v-for="i in 2" :key="i" class="slide">
        <h3>
          <span class="no-swipe">
            {{ i }}
          </span>
        </h3>
      </div>
    </VSlickCarousel>
  </div>
</template>

<style scoped lang="scss">
.wrapper {
  padding: 28px;
  .slide {
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 200px;
    h3 {
      padding: 20px;
      margin: 0 10px;
      text-align: center;
    }
  }
}
</style>

[vedmant]

@ctfdavis Just for a quick response I'm seeing the issue here for example https://www.tripexpert.com/bali/hotels/villa-wayang I'l try to make a simple playground reproduction later