naver / egjs-flicking

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

ngx-flicking quickstart not working for me unless with draggable=true #894

Open Ronkiro opened 1 month ago

Ronkiro commented 1 month ago

Following https://codesandbox.io/p/sandbox/egjsngx-flicking-examples-czb2g with code:

<ngx-flicking
  [options]="{ circular: true, duration: 500 }"
  [plugins]="plugins"
>
  <div class="pointer-events-auto"  flicking-panel>
    <img src="https://naver.github.io/egjs-flicking/images/bg01.jpg" />
  </div>
  <div class="pointer-events-auto"  flicking-panel>
    <img src="https://naver.github.io/egjs-flicking/images/bg02.jpg" />
  </div>
  <div class="pointer-events-auto" flicking-panel>
    <img src="https://naver.github.io/egjs-flicking/images/bg03.jpg" />
  </div>
</ngx-flicking>

Inside a component used on a page, i.e.

import { Component, Input } from '@angular/core';
import { Arrow, AutoPlay, Parallax } from '@egjs/flicking-plugins';
import { NgxFlickingModule } from '@egjs/ngx-flicking';
import { ArticleObject } from '../../types/article';

@Component({
  selector: 'app-featured-banner',
  standalone: true,
  imports: [NgxFlickingModule],
  templateUrl: './featured-banner.component.html',
  styleUrl: './featured-banner.component.scss',
})
export class FeaturedBannerComponent {
  @Input() articles: ArticleObject[] = [];

  plugins = [
    new AutoPlay({
      duration: 2000,
      direction: 'NEXT',
    }),
  ];
}

One can do it exactly the same way and it's not working. I noticed it's related to images being draggable, so setting it as false or adding something like -webkit-user-drag: none; to the image works. But without it, it doesn't. Although, it works in CodeSandbox but not in my local.

ng --version
18.2.5
node --version
v22.9.0
    "@egjs/flicking-plugins": "^4.7.1",
    "@egjs/ngx-flicking": "^4.11.4",

Note: I also use Tailwind, but i added ngx-flicking last to take priority. Maybe related?

Is it the expected behavior?

malangfox commented 1 month ago

Hello @Ronkiro.

If a tag or img tag is inside a panel, preventDefaultOnDrag option is recommended to prevent the default dragging behavior of those tags. Can you try that option and see if it resolves this issue?

Ronkiro commented 1 month ago

Thanks for sharing the option@malangfox , yes it works! I proposed a change in the PR (mentioned above) to quickstart docs, so by this way we can have it working for everyone