javascript - 네이티브 js 캐러셀 차트

Question

최근 기본 js 캐러셀 이미지를 수정 중입니다

전환에 전환을 추가해서 마지막 사진부터 첫 번째 사진까지 연결 문제가 큽니다.

마지막 사진 뒤에 첫 번째 사진을 추가한 다음 상위 요소에서 첫 번째 사진을 제거하는 것이 아이디어입니다

1231 이런 생각

비슷한 코드를 작성하신 고수님이 계시다면 참고하시면 되겠죠

Answer 1

성악마 장모님의 논리를 바탕으로 하나 만들어봤습니다.

배열은 1 2 3 4 5 1

마지막 사진이 첫 번째 사진으로 전환되어 마지막 1이 표시됩니다. 순차적이기 때문에 미끄러짐이 매우 부드럽습니다.

Key: 5대1 이후에는 width: 0을 직접 복원하면 다시 초기 상태가 되기 때문에 하자가 거의 없습니다.

저도 슬라이드할 때마다 대기열 끝으로 옮겨보려고 했는데 구현하기 너무 귀찮아서 포기했습니다.

Answer 2

제거할 필요가 없습니다. 기존 노드를 직접 추가하여 이동하면 됩니다. 그런 다음 스크롤 막대를 변경할 차례입니다.

Answer 3

https://github.com/cubiq/Swip...
내 첫 번째 슬라이더는 IScroll의 저자가 작성한 이 내용을 기반으로 했습니다

Answer 4

그럴 필요는 없으며 DOM 노드에 대한 작업이 적을수록 좋습니다. 예를 들어 이 정렬 순서를 5 1 2 3 4 5 1로 사용하면
5에서 1로 오른쪽으로 스크롤하면 애니메이션이 완료되면 전환이 있는 클래스의 경우 처음 1로 위치를 다시 조정한 다음 왼쪽으로 1부터 5까지 전환이 있는 클래스를 다시 할당합니다. 원칙은 시각적인 속임수를 사용하는 것입니다. 오른쪽의 처음 2와 5 다음의 1은 스타일이 동일하고 차이가 없으므로 목적을 달성할 수 있기 때문입니다.