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

Question

최근 네이티브 js 캐러셀 사진을 만지작거리다가 전환에 전환을 추가해서 마지막 사진부터 첫 번째 사진까지 연결 문제가 컸습니다. 마지막 그림 뒤에 첫 번째 그림을 추가한 다음 상위 요소에서 첫 번째 그림을 제거하는 것이 아이디어입니다. 비슷한 코드를 작성한 마스터가 있습니까?

过去多啦不再A梦 · Answer

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

배열은 1 2 3 4 5 1

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

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

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

高洛峰 · Answer

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

给我你的怀抱 · Answer

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

大家讲道理 · Answer

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