naver / egjs-flicking

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

플러그인 사용 중 문의드립니다. #822

Closed jihye990513 closed 11 months ago

jihye990513 commented 11 months ago

문제상황

1. 한 페이지 안에서 Arrow 플러그인을 두개의 슬라이드에 각각 사용하면, 정상적으로 작동하지 않습니다. 아래 코드에 오류가 있는 것인가요?

var arrowA = new Flicking(".arrowA", {
      panelsPerView: 4, 
      noPanelStyleOverride: true,
      bound: true,
      align: "prev",
    });

    arrowA.addPlugins(new Flicking.Plugins.Arrow({
      parentEl: document.body
    }));
    var arrowB = new Flicking(".arrowB", {
      align: "prev",
      circular: true,
    });

    arrowB.addPlugins(new Flicking.Plugins.Arrow({
      parentEl: document.body
    }));

https://naver.github.io/egjs-flicking/ko/Plugins 사이트에서도 is-circle 슬라이드 아래의 두개의 슬라이드가 위의 arrow로 아래 슬라이드가 작동하는 오류가 있습니다.

질문사항

1. 한 슬라이드에서 AutoPlay와 Arrow 플러그인 동시 사용할 수 있는지 궁금합니다.

2. 반응형 작업 시 브레이크 포인트에 따라 옵션값 변경도 가능한지 궁금합니다.

malangfox commented 11 months ago

안녕하세요 @jihye990513 님.

문의를 남겨주신 현상은 arrowA와 arrowB의 플러그인 옵션 중 parentEl 이 동일한 document.body 로 설정되어 비정상적으로 동작한 것으로 확인됩니다. 문서에 작성된 데모에서 해당 부분을 수정할 예정이며, parentEl 옵션을 서로 다른 viewport로 설정해보시거나 별도의 옵션을 주지 않고 기본값을 사용해보시면 겪고 계신 현상이 해결될 것 같습니다.

구현에 참고가 되실 수 있게끔 올바르게 parentEl을 설정한 데모를 첨부드립니다.

문서에서 구현 예시가 잘못 작성되었던 부분을 남겨주셔서 감사합니다.

jihye990513 commented 11 months ago

안녕하세요 @malangfox 님, 빠른 답변 감사합니다 ! 완벽 해결되었습니다 ! 좋은 하루 되세요 :-)