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

[jihye990513]

문제상황

1. 하나의 슬라이드에 AutoPlay, Arrow, Pagination, Fade 플러그인을 동시에 사용하고 싶습니다.

질문사항

• Fade가 작동하지 않는데, 코드 사용에 문제가 있는 것인가요?
• 현재 https://naver.github.io/egjs-flicking/ko/Plugins#fade 페이지에 구현되어 있는 fade 효과 말고, https://codesandbox.io/p/sandbox/vl4fc8?file=/index.html:83,8 이런식으로 슬라이드가 제 자리에서 패널이 이동하지 않고 fade 되는 슬라이드도 만들 수 있나요?

    var check_list = new Flicking(".check_list", {
      circular: true,
      align: "prev",
      autoResize: true,
    });

    //Fade
    check_list.addPlugins(new Flicking.Plugins.Fade({
      selector: "",
      scale: 1,
    }));

    //autoplay
    check_list.addPlugins(new Flicking.Plugins.AutoPlay({
      duration: 3000,
      direction: "NEXT",
      stopOnHover: true,
    }));

    //arrow
    var check_arrow = new Flicking.Plugins.Arrow({
      parentEl: document.querySelector(".check_wrp"),
    });

    check_list.addPlugins(check_arrow);

    //pagination
    check_list.addPlugins(new Flicking.Plugins.Pagination({
      parentEl: document.body,
      type: "bullet",
    }));

[jihye990513]

@malangfox 님, 좋은 오후입니다 ! 한가지 더 궁금한 것이 있어 아래로 코멘트 남깁니다 (ㅡㅡ)

혹시 breakpoint에 따라 옵션값 변경도 가능한가요?

예를 들어, 1020px 이상일 때, AutoPlay의 duration: 30000 이었다가, 1020px 이하로 줄어들었을 땐, AutoPlay의 duration: 0 그리고 easing 값이 x => x로 바꾸고 싶습니다.

flicking 라이브러리의 따로 설정할 수 있는 식이 있는 것인지, 아니면 if문으로 제어해야 하는지 궁금합니다.

[malangfox]

안녕하세요 @jihye990513 님.

Fade 플러그인은 AutoPlay 플러그인과 다르게 첫 번째 인자로 Option이 아닌 selector를 받고, 두 번째 인자로 scale을 받습니다. Fade 플러그인 부분을 new Flicking.Plugins.Fade() 로 변경해보시면 원활하게 작동할 것 같습니다. 4종류의 플러그인을 적용한 데모를 첨부드립니다.

이 부분은 첫 번째 인자로 Option을 받는 플러그인과 받지 않는 플러그인들이 보다 명확하게 구분될 수 있도록 저희 쪽 문서를 보완할 수 있도록 하겠습니다.

또한, 두 번째로 남겨주신 Fade 효과의 경우 저희 컴포넌트에서 자체적으로 지원하는 기능으로는 존재하지 않아 직접 유사한 구현을 해야 될 것 같습니다. prev 및 next 메서드를 이용할 때 Fade 효과가 나타나도록 한 데모 가 존재하여 참고가 될 수 있게끔 첨부드립니다.

breakpoint에 따른 옵션값 변경은 afterResize 이벤트가 발생했을 때 Flicking의 옵션을 변경하는 방법으로 구현이 가능할 것 같습니다. 남겨주신 내용 중 AutoPlay의 duration은 다음 Panel로 넘어가는 주기인데, 이 0초마다 next가 호출되는 것은 의도하시지 않은 구현이라 생각하여서 대신 Flicking 인스턴스의 duration을 0으로 설정하게끔 데모를 만들어보았습니다.

이 외에도 궁금하신 점이 있다면 남겨주세요!

[malangfox]

별도의 추가적인 코멘트가 없어 이슈를 닫아두도록 하겠습니다.