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

Issues on dragging arrows #832

Open NIFO43 opened 1 year ago

NIFO43 commented 1 year ago

Description

I have the problem that the arrows do not go by themselves, one step forward or back. Also, the arrows can be dragged so that it can move. (see video)

Documentation I followed: https://naver.github.io/egjs-flicking/Plugins

Steps to check or reproduce

<script setup lang="ts">
import Flicking from "@egjs/vue3-flicking";
import {Arrow} from "@egjs/flicking-plugins";

const plugins = ref([new Arrow()]);

function test() {
    console.log('button works')
}
</script>
<template>
<Flicking
    ref="swiper"
    :plugins="plugins"
    :options="{ circular: true }"
    class="w-full h-full"
>
    <div
        class="h-full w-full flex bg-cover rounded-md"
        :key="img.id"
        v-for="img in resort.media"
        :style="`background: url('${img.original_url}'); background-size: cover;`"
    >
    </div>
    <template #viewport>
        <span @click="test" class="flicking-arrow-prev"></span>
        <span class="flicking-arrow-next"></span>
    </template>
</Flicking>
</template>
<style scoped>
@import url("@egjs/vue3-flicking/dist/flicking.css");
@import url("@egjs/flicking-plugins/dist/flicking-plugins.css");
@import url("@egjs/flicking-plugins/dist/arrow.css");
</style>

Video

https://github.com/naver/egjs-flicking/assets/30083590/ab91319a-2d72-4c33-9715-94e591d2bbff

malangfox commented 11 months ago

Hello @NIFO43. We apologize for the late response. We created a demo to reproduce the issue you left, but it seems to be working fine.

There are two things to check in your implementation.

We'd like to try to reproduce this issue. Can we check a demo or repo that reproduces this issue?