Slide transition animation not display expected behavior

[adrielwerlich]

I have a Vue3 carousel inside a Single file component

package.json

"vue3-carousel": "^0.1.40"

SFC

import { Carousel, Slide, Navigation } from 'vue3-carousel';
import 'vue3-carousel/dist/carousel.css';
import '@/assets/scss/Carousel.scss';

       <Carousel :wrap-around="true" class="box-carousel" :autoplay="2000" :transition="500">
          <Slide v-for="slide in slides" :key="slide.id">
            <div class="mx-auto w-[85%] md:w-[90%] rounded-lg p-5 bg-blue-secondary-5 h-full dark:bg-blue-secondary-5 dark:text-black-dark-100">
              <!-- Box Description -->
              <div class="grid grid-cols-5 gap-5 mb-5">
                  <div class="col-span-1">
                    <div class="rounded-full h-11 w-11 bg-black-20 flex items-center justify-center">
                      <p class="uppercase font-bold text-sm">{{slide.title}}</p>
                    </div>
                  </div>
                  <div class="col-span-4 text-left">
                    <div class="ml-3 md:ml-0">
                      <p class="font-bold">{{slide.name}}</p>
                      <p class="text-black-40 text-xs">{{slide.date}}</p>
                    </div>
                  </div>
              </div>
              <!-- End Box Description -->

              <!-- Box Comment -->
              <div class="text-left mb-8">
                <p class="text-sm  ">
                  {{slide.comment.substring(0,130)}}
                </p>
              </div>
              <!-- End Box Comment -->

              <!-- Box Actions -->
              <div class="grid grid-cols-6 gap-5 absolute bottom-5">
                <div class="col-span-2">
                  <a href="javascript:void(0)" class="flex items-center text-xs md:text-sm relative top-1 text-blue-secondary-100">
                    <UndoIcon width="10" class="fill-blue-secondary-100 mr-2 hidden md:block" /> 
                    Responder
                  </a>
                </div>
                <div class="col-span-2">
                  <a href="javascript:void(0)" class="flex items-center text-xs md:text-sm relative top-1 text-black-40 underline">
                    Ver contexto
                  </a>
                </div>
                <div class="col-span-2">
                  <p class="text-xs md:text-sm flex items-center justify-end md:justify-start relative top-1">
                    <span class="h-2 w-2 rounded-full bg-green-primary-100 inline-block mr-5 md:mr-1 relative top-[-1px]"></span> 
                    <span class="hidden md:block">aprovado</span>
                  </p>
                </div>
              </div>
              <!-- End Box Actions -->

            </div>
          </Slide>

          <template #addons>
            <Navigation />
          </template>
        </Carousel>

The transition behavior of the slides is not as expected. It is just changing withouth the transition/translate position effect

This is how it is:

Expected effect: (by the way, the carousel sometimes spontaneously display the expected behavior like when after some hot module replacement refresh happens after saving some edit in VSCode and there is a refresh in the vue app like this):

I've create a Stackoverflow post with the same question: https://stackoverflow.com/questions/74951049/vue-3-carousel-unexpected-behavior

Thanks in advance for any advice!! Happy new year !! 🙂

[ismail9k]

Could you check that you are using the latest version of the component? Also, try your app on production mode and check if it has the same issue.

[adrielwerlich]

Could you check that you are using the latest version of the component? Also, try your app on production mode and check if it has the same issue.

Hello @ismail9k, actually we have abandoned using this solution in favor of another carousel slider. We haven't found a solution for the issue.