naver/egjs-flicking-plugins

Plugins for @egjs/flicking

egjs-flicking-plugins's Issues

Auto play plugin broken with the new update for Vue 3

Description

After the recent Vue3 update, it renders pretty well on my side with the latest version of Vue. However, the autoplay plugin for this instance only does one tick before it stops. i don't see any console errors so I'm assuming it is something with this plugin for Vue3.

Steps to check or reproduce

Attaching a codesandbox template that I replicated the issue on.
https://codesandbox.io/s/holy-morning-5otoz?file=/src/App.vue

Errors occur in the Sync.spec.ts file after running the npm run test.

Description

I forked the 4.2.2 version, and install node_modules and execute npm run test. Then Two tests failed.

Steps to check or reproduce

1. Fork the version of 4.2.2
2. npm install and npm run test
3. npm run test is fail.

When the number of panels is small in the Circular state, parallax causes strange behavior.

When the number of panels is small in the Circular state, parallax causes strange behavior.

If there is one panel, the movement of the image occurs.

In the case of freeScroll, the duration of next and prev feels very long.

Description

naver/egjs-flicking#814

Steps to check or reproduce

Add update interface for panel's add, remove, or update

Description

naver/egjs-flicking#215

Steps to check or reproduce

export interface Plugin {
  init(flicking: Flicking): void;
  update?(flicking: Flicking): void;
  destroy(flicking: Flicking): void;
}

Pagination - Can't use custom classes on the render function

Description

When using the custom classes on the renderBullet, it doesn't show after it's rendered.

Steps to check or reproduce

• type: "scroll"
• renderBullet:

classes => `<span class="test ${classes}"></span>`

Bullet navigation should override moveType constraints

Description

Experiencing some odd behaviour with this;

If I have 4 panels and use moveType: 'strict' (1 panel at a time), clicking the 1st bullet when I'm on the 4th panel flicking flicks to the 3rd panel, but the 1st bullet becomes the "active" one.

Changing to moveType: 'snap' fixes the issue, but I prefer the UX of 'strict' for my case.

Steps to check or reproduce

Should be pretty easy to reproduce, but in case it isn't, my context is
Vue3 in Google Chrome Version 100.0.4896.88 (Official Build) (64-bit) on Arch Linux

Export plugin option interfaces?

Description

Not an issue, more of a suggestion for ease-of-access and maintainability.

For reference, my use-case is that I'm making a Vue3+TS single-file "Carousel" component, and I want to control the <Flicking> component's plugins prop, with props for my <Carousel>

// <script setup lang="ts">
import { defineProps, computed, PropType } from "vue";
// What I want to do:
// import { Pagination, PaginationOptions, Arrow, ArrowOptions, ... } from "@egjs/flicking-plugins";

// What I'm doing:
// interface PaginationOptions  {
//    parentEl: HTMLElement | null, 
//    ...copy everything from the PaginationOptions in this repo
// }
// interface ArrowOptions { ... }
// interface FadeArguments { ... }
// and so on


const props = defineProps({
  pagination: { type: Object as PropType<Partial<PaginationOptions> | null>, default: null },
  // same idea for arrows, autoplay, fade, parallax, sync
});
const plugins = computed(() => {
  return [ 
    props.pagination && new Pagination(props.pagination),
    // props.arrow && new Arrow(props.arrow), and so on
   ];
})

so that I can instantiate my Carousel component like this

<!-- Use default Pagination plugin options -->
<Carousel :pagination="{}">

<!-- Don't use the Pagination plugin-->
<Carousel>

<!-- Use Pagination plugin and overwrite some default pagination options -->
<Carousel :pagination="{ type: 'fraction' }">

Steps to check or reproduce

AutoPlay - stop while hover

Description

Add option for stop auto play when mouse on slider

How can use this in CDN?

<script src="https://unpkg.com/@egjs/[email protected]/dist/flicking.pkgd.min.js"></script>
<script src="https://naver.github.io/egjs-flicking-plugins/release/latest/dist/plugins.min.js"></script>
<link rel="stylesheet" href="https://naver.github.io/egjs-flicking-plugins/release/latest/dist/flicking-plugins.css">
<link rel="stylesheet" href="https://unpkg.com/@egjs/[email protected]/dist/flicking.css">
<script>
  const flicking = new Flicking("#Carousel", {align: "center", circular: true, bound: true, renderOnlyVisible: true, useFractionalSize: true, align: "prev"})
  flicking.addPlugins(new Arrow());
</script>

Arrow is not defined.
How can use arrow plugin by CDN?

Expose start() and stop() functions on AutoPlay?

Description

Just a suggestion. Would love to be able to control this plugin a bit more (e.g. stopping on a specific index, stopping on focus inside panel, etc) instead of just stopping on hover 😃

Steps to check or reproduce

Pagination의 type값중 'scroll'을 'bullet'으로 변경하고 scroll에 대한 추가 옵션을 지정하는 방식으로 변경하면 좋을 것 같습니다./It would be good to change 'scroll' to 'bullet' among the type values of pagination and change it to specify additional options for scroll.

Description

type값 중 bullet과 fraction은 UI의 형태를 구분하여 지어진 이름인데 반해, scroll은 형태가 아닌 기능 일부('bullet' 타입인데 bullet 몇 개만 표시, 패널 index에 따라 bullet 컨테이너를 스크롤함)에 초점이 맞춰진 이름이므로 bullet 타입의 세부 옵션으로 정의되는 것이 좀 더 자연스러운 것 같아 보입니다. 예시 코드는 코드1 을 참조 부탁드립니다.

---

Among the type values, bullet and fraction are names that distinguish the shape of the UI, whereas scroll is a part of a function rather than a shape ('bullet' type, but only a few bullets are displayed, and the bullet container is scrolled according to the panel index) ), so it seems more natural to be defined as a detailed option of type bullet. For example code, please refer to Code 1.

코드1 - bullet 타입의 추가 파라미터 정의 예시
Code 1 - Example of defining additional parameters of bullet type

new Pagination({
  type: 'bullet',
  param: {
    // 표시할 bullet 개수. 생략시 전체 표시. 전체 값보다 클 수 없고, 0이하 값 지정시 bullet 비표시
    display: 5,
     // bullet의 형태를 결정하는 값. A, B는 임의로 지정한 값이며 해당 bullet형태를 더 잘 설명하는 단어로 대체될 수 있으며 필요시 새로운 타입의 정의도 가능합니다.
    // 'A': 현재 Pagination bullet 데모와 동일한 형태. 중간 index일 때만 display 개수 노출 보장. 처음과 끝 부분에선 한 두개가 적을 수 있음
    // 'B': 항상 display 개수 만큼의 노출을 보장. 중간 index일 때는 항상 1번 5번 bullet이 작게 표시됨. 처음과 끝일 때는 각각 최우측과 최좌측 bullet이 작게 표시됨
    shape: 'A'
  },
});

스크린샷1 - Pagination 생성자의 type 옵션
Screenshot 1 - type option in Pagination constructor

Steps to check or reproduce

AutoPlay 플러그인 사용 시 단말기 시간 변경 후 빠르게 넘어가는 현상 문의

Description

안녕하세요, Flicking AutoPlay 사용 중에 QA가 발생하여 문의드립니다.
해당 플러그인 사용 시 단말기 시간을 변경한 후 다시 접근했을때 플리킹 영역이 빠르게 넘어가는 현상이 아래와 같이 발생하고 있습니다.

iOS

RPReplay_Final1713284590.mp4

Android

Screen_Recording_20240417_065108_Settings.mp4

혹시 해당 현상 수정이 가능할지 문의드립니다 🙇‍♂️🙇‍♂️

감사합니다

Steps to check or reproduce

Arrow and Pagination(Bullet) plugins have to click two times to move panel

Description

I face the problem about Arrow and Pagination(Bullet) plugin. It has to click two times to move panel.

Steps to check or reproduce

I created a sample project on Codesandbox. You could check on this link.

Dependencies

@egjs/flicking-plugins: 4.1.0
@egjs/vue-flicking: 4.1.2
vue: 2.6.11

Reproduce

Open the website from this project, and click to navigate panel by clicking on arrow or bullet.

Pause autoplay animation on hover

Description

I'm trying to reach a marquee effect. My configuration is working fine and smooth. The only issue I encountered is when I hover the slider it gets paused correctly but only when it reaches the next slide, aka I would like to have the possibility to interrupt the animation while slide is actually changing. In the video below you can see the behaviour of the bottom slider (flicking) and the top slider (another library - splidejs -):

Video.senza.titolo.-.Realizzato.con.Clipchamp.2.mp4

I would like to have the same pause behaviour of the top slider. Also this Splide plugin has some performance issues so I would like to switch to flicking if possible.

Steps to check or reproduce

Svelte

import Flicking, { FlickingPanel } from '@egjs/svelte-flicking';
import { AutoPlay } from '@egjs/flicking-plugins';
import '@egjs/svelte-flicking/dist/flicking.css';

let flicking: Flicking;
const plugins = [
	new AutoPlay({ duration: 0, animationDuration: 3000, direction: 'NEXT', stopOnHover: true })
];

<Flicking
	bind:this={flicking}
	{plugins}
	hideBeforeInit={true}
	firstPanelSize="16rem"
	options={{
		align: 'center',
		circular: true,
		easing: (x) => x,
                interruptable: true,
		autoResize: true,
		moveType: 'freeScroll'
	}}
>
	{#each slides as slide, i}
		<FlickingPanel class="h-36 !w-64 !mb-8">
			CONTENT
		</FlickingPanel>
	{/each}
</Flicking>

How to create Custom Plugins

Description

How to create custom plugins, like a scaling only plugin rather than perspective + scaling

AutoPlay 플러그인 관련 질문

Description

안녕하세요. AutoPlay 플러그인을 사용하던 중 궁금한 점이 생겨 질문 드립니다.
duration은 애니메이션에서 해당 탭이 유지되는 시간이라고 이해했는데요.
혹시 다음 탭까지 이동하는데에 걸리는 시간(speed)를 조절할 수 있는 parameter가 있을까요?

감사합니다.

Arrow and Bullet touchstart listeners should be passive

Description

As far as I can tell, both Arrow and Bullet plugins are the only ones that listen for the touchstart event. This event should be a passive listener to improve scrolling performance per Lighthouse and https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md. It does not look like these listeners use preventDefault(), only stopPropagation(), so it shouldn't be too much of a change.

Hammer.js also exhibits this problem, though I don't know what is calling hammer's addEventListener function

I modified the dist files locally and don't see any regressions.

Steps to check or reproduce

I can produce one if needed

Component render empties flicking-pagination-bullets

Description

Component render empties the bullets container. If no re-render appears, the plugin works well. But if state change causes component re-render then bullets disappear.

The situation happens in React.js.

Steps to check or reproduce

const flickingRef = useRef<Flicking | null>(null);
const plugins = [new Pagination({ type: "bullet" })];
const [isMoving, setIsMoving] = useState(false);

const handleMoveStart = () => {
    setIsMoving(true);
};

const handleMoveEnd = () => {
    setIsMoving(false);
};

<Flicking
            ref={flickingRef}
            circular={true}
            align="prev"
            onMove={handleMoveStart}
            onMoveEnd={handleMoveEnd}
            plugins={plugins}
          >
            <div className="recommendation-box">
                container1
            </div>
            <div className="recommendation-box">
                container2
            </div>
            <div className="recommendation-box">
                container3
            </div>
            <div className="recommendation-box">
                container4
            </div>
            <ViewportSlot>
              <div className="flicking-pagination"></div>
            </ViewportSlot>
          </Flicking>

When onMove and onMoveEnd handlers modify state, causing component rerender, then

<div class="flicking-pagination flicking-pagination-bullets">
<span class="flicking-pagination-bullet flicking-pagination-bullet-active"></span>
<span class="flicking-pagination-bullet"></span>
<span class="flicking-pagination-bullet"></span>
<span class="flicking-pagination-bullet"></span>
</div>

becomes

<div class="flicking-pagination flicking-pagination-bullets"></div>

Issues on dragging arrows

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

Bildschirmaufnahme.2023-09-29.um.11.33.05.mov

Invalid 'types' file location.

• from

{
 "types": "./index.d.ts",
}

• to

{
 "types": "./declaration/index.d.ts",
}

Pagination bullet is not showing

Description

Version I use :
"@egjs/flicking-plugins": "^4.2.1",
"@egjs/ngx-flicking": "^4.3.0",

I tried the pagination plugin as described in the document, but it is not rendered.
I found that DOM has been created, but the height is 0, and the font-size of each bullet is 0 as well.
However, when I set the type as "fraction", it worked just fine.

Steps to check or reproduce

Autoplay - add play() and stop() method

Description

Currently there's no way for users to programmatically play and stop autoplay.

AutoPlay doesn't work when there are multiple flickings.

Version I use :
"@egjs/flicking-plugins": "^4.2.1",
"@egjs/ngx-flicking": "^4.3.0",

Hello, @WoodNeck !

It seems like that AutoPlay doesn't work when there are multiple flickings.
Here I attach my code snippets below:
https://codesandbox.io/s/nifty-moon-fu0fx?file=/src/app/app.component.html

And sometimes I found that the multiple autoplay works when I resize the browser window, but I couldn't reproduce this symptom in the demo.

By the way, I really enjoy your work here! Thank you for this awesome component.

커스텀 plug-in개발을 위한 API 참조 문서가 필요합니다./API reference documentation for custom plug-in development is required.

Description

plug-in개발을 위한 참조 문서가 없는 것 같습니다. 커스텀 plug-in의 개발 혹은 기존 개발된 plug-in의 커스터마이징등을 위해서는 관련 내용이 정리된 문서가 필요합니다. 문서 제작 부탁드립니다.

There seems to be no reference documentation for plug-in development. In order to develop a custom plug-in or to customize an existing plug-in, a document with related contents is required. Please create a document.

Steps to check or reproduce