naver / egjs-flicking

🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
https://naver.github.io/egjs-flicking/
MIT License
2.75k stars 128 forks source link

Using is-outside in vue 3 #880

Open fernandogiroto opened 1 month ago

fernandogiroto commented 1 month ago

I'm using vue 3 setup, and I'm trying to use the arrow, using is-outside. However, if I put it as it is in the documentation, I get an error:

Documentation:

<Flicking :options="{ circular: true }" :plugins="plugins">
  <div class="card-panel">1</div>
  <div class="card-panel">2</div>
  <div class="card-panel">3</div>
</Flicking>
<span class="flicking-arrow-prev is-outside"></span>
<span class="flicking-arrow-next is-outside"></span>

My Project:

<template>
    <div ref="test" id="test" class="test"></div>
    <Flicking :plugins="activePlugins" ref="flicking">
        <slot name="content"></slot>
        <template #viewport>
            <div class="flicking-pagination" v-if="pagination"></div>
        </template>
    </Flicking>
    <span class="flicking-arrow-prev is-outside"></span>
    <span class="flicking-arrow-next is-outside"></span>
</template>
<script setup lang="ts">
    // ActivePlugins
    const testingElement = document.querySelector('.test');
    const activePlugins: any[] = [   
        new Arrow({
        parentEl: testingElement,
        prevElSelector: ".flicking-arrow-prev",
        nextElSelector: ".flicking-arrow-next",
    })];

Error: utils.ts:30 Uncaught (in promise) Error: [Flicking-Arrow] Couldn't find element with the given selector: .flicking-arrow-prev

If I put it inside tags, it doesn't give me an error, but it doesn't work:

<template>
    <div ref="test" id="test" class="test"></div>
    <Flicking
        :options="flickingOptions"
        :plugins="activePlugins"
        @changed="handleChange"
        @move-start="handleChangeStart"
        ref="flicking">

        <slot name="content"></slot>
        <template #viewport>
            <div class="flicking-pagination" v-if="pagination"></div>
        </template>
        <span class="flicking-arrow-prev is-outside"></span>
        <span class="flicking-arrow-next is-outside"></span>
    </Flicking>
</template>

Still the same: Captura desde 2024-07-30 17-52-15

fernandogiroto commented 1 month ago

Any awnser?

malangfox commented 1 month ago

Hello @fernandogiroto.

It seems that the Arrow element is not being found as a bug in our plugin. We'll leave a comment once we fix this error and release the newest patch.