2023-07-27

TODO #

• Swiper loop 모드의 Duplicate 문제
  • Loop without duplication? · Issue #2588 · nolimits4web/swiper (github.com)
  • In loop mode, duplicate slides are not being updated when the contents of the original slides change · Issue #2629 · nolimits4web/swiper (github.com)
  • Vue 2 -- looping Swiper -- allow us to render the duplicates so they stay reactive · Issue #6430 · nolimits4web/swiper (github.com)
  • Loop duplicates are not reactive as the originals - Vue 2 (not vue swiper component) · Issue #4349 · nolimits4web/swiper (github.com)
  • vue methods are not loaded when looping · Issue #3938 · nolimits4web/swiper (github.com)

해당 이슈는 현재 Swiper Core 라이브러리를 사용하고 있는데 Swiper 내에 Vue 컴포넌트를 사용할 때, loop 옵션을 사용 시 Vue 컴포넌트가 아니라 HTML을 복사하기 때문에 발생하였습니다.

Swiper의 Core에서는 슬라이드를 컴포넌트로 복사하는 것이 불가능하고, (링크) Vue 3부터 사용할 수 있는 Swiper Vue에서는 Vue 컴포넌트 형태로 사용할 수 있기 때문에 해당 이슈가 수정되었다고 합니다. (링크)

loop 옵션에서 슬라이드가 컴포넌트로 복제되는 것이 아니기 때문에 이벤트 핸들러 이슈 뿐만 아니라, 다른 이슈들이 발생할 수 있는 상황입니다.

내부 Vue 컴포넌트가 업데이트 되었을 때, 복제된 슬라이드는 업데이트 되지 않는 이슈 등이 발생하기 때문에 loop를 가능한 사용하지 않는 것이 다른 이슈를