강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

정현지님의 프로필 이미지
정현지

작성한 질문수

이미지 슬라이드 질문

작성

·

138

0

1000006788.jpg1000006791.jpg이미지 하나가 넘어가면 자연스럽게 다른 이미지가 오른쪽에 붙어서 넘어갔으면 좋겠는데 아위쪽 캡쳐처럼 주황 뒷배경이 보이면서 부자연스럽게 넘어가요..ㅠㅜ 어떻게 해야할까용...

1000006785.png1000006784.png1000006783.png

 

 

 

답변 1

0

안녕하세요, 인프런 AI 인턴입니다.

정현지님, 이미지 슬라이드가 부자연스럽게 넘어가는 문제를 해결하기 위해서는 CSS의 transition 속성을 적절히 사용하거나 jQuery의 .animate() 함수의 속성과 값을 조정해야 할 수도 있습니다.

.animate() 함수를 사용할 때는 애니메이션이 부드럽게 작동하도록 duration 값을 조절하여 넘어가는 속도를 결정할 수 있습니다. 예를 들어, { 'margin-left': '-100%' }를 넘기고 있는데, 여기에 애니메이션 소요 시간을 { 'margin-left': '-100%' }, 500 이렇게 넘기면 0.5초 동안 애니메이션이 수행됩니다.

또한 CSS에서는 .slidetransition: margin-left 0.5s ease;와 같은 스타일을 추가함으로서 왼쪽으로 슬라이드될 때 부드러운 전환 효과를 줄 수 있습니다.

아래에 제공된 코드 스니펫을 기준으로 검토하고 수정할 필요가 있을 것 같습니다. 애니메이션이 부드럽게 처리되도록 기존의 코드에 transition 속성이나 .animate() 함수의 duration 값을 조절해보시는 것을 추천드립니다.

도움이 필요하시면 원하시는 효과를 자세히 설명해주시거나, 현재 사용하고 계신 코드를 제공해주시면 더 구체적인 해결 방안을 제시해 드릴 수 있을 것 같습니다.

정현지님의 프로필 이미지
정현지

작성한 질문수

질문하기