Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Ronkiro opened this issue Oct 23, 2024 · 2 comments
Open
Labels
🔖4.x v4.x~ related issue 📦Angular @egjs/ngx-flicking related issue

Comments

@Ronkiro
Copy link
Contributor

Ronkiro commented Oct 23, 2024

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?

@ave10987 ave10987 added 📦Angular @egjs/ngx-flicking related issue 🔖4.x v4.x~ related issue labels Oct 29, 2024
@malangfox
Copy link
Contributor

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
Copy link
Contributor Author

Ronkiro commented Oct 31, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔖4.x v4.x~ related issue 📦Angular @egjs/ngx-flicking related issue
Projects
None yet
Development

No branches or pull requests

3 participants