EFFECT/SLIDER5 EFFECT | SLIDER | 버튼과 닷버튼 형식의 이미지 슬라이드 sliderEffect | 버튼과 닷버튼 형식의 이미지 슬라이드 오늘의 목표 ❔problem 첫번째 이미지에서 이전 버튼을 누르면 마지막 사진으로 넘어가야 하며, 마지막 이미지에서 다음 버튼을 누르면 첫번째 사진으로 넘어가야 합니다. ❗️solve if문을 활용하는 방법과 if문 없이 해결하는 방법이 있으며, 오늘 보여드릴 방법은 if문 없이 해결하는 방법입니다. 1. 사이트 구조 살펴보기 HTML 살펴보기 화면 아래 닷버튼이 추가되었습니다. prev next CSS 살펴보기 닷버튼 디자인이 추가되었습니다. 2. script 살펴보기 이미지가 움직이는 영역 | 매개변수 num을 활용하여 이미지의 가로값만큼 x축으로 이동할 수 있도록 설정해줍니다. ⇢ next 버튼 설정 | currentIndex 값에 1.. 2022. 10. 17. SLIDER | 이미지 슬라이더 | 버튼 형식의 이미지 슬라이드 sliderEffect | 버튼 형식의 이미지 슬라이드 오늘의 목표 ❔problem 첫번째 이미지에서 이전 버튼을 누르면 마지막 사진으로 넘어가야 하며, 마지막 이미지에서 다음 버튼을 누르면 첫번째 사진으로 넘어가야 합니다. ❗️solve if문을 활용하는 방법과 if문 없이 해결하는 방법이 있으며, 오늘 보여드릴 방법은 if문 없이 해결하는 방법입니다. 1. 사이트 구조 살펴보기 CSS 살펴보기 이미지를 좌우로 이동할 수 있는 버튼 부분이 추가되었습니다. HTML 살펴보기 마찬가지로 양쪽 버튼이 추가되었습니다. prev next 2. script 살펴보기 이미지가 움직이는 영역 | 매개변수 num을 활용하여 이미지의 가로값만큼 x축으로 이동할 수 있도록 설정해줍니다. ⇢ next 버튼 설정 | curr.. 2022. 9. 19. SLIDER | 이미지 슬라이더 | 좌로 넘기기(연속) SLIDER 효과_좌로 움직이는 이미지(연속)를 만들어보자 ! 저번 시간에 해봤던 '이미지가 좌로 움직이는' 효과를 이번엔 '연속'으로 나오도록 만들어 봅시다. 원본 페이지 내에서도 소스보기를 통해 코드를 바로 확인해보실 수 있습니다^0^ 원본 소스 보기 script를 살펴봅시다 ! 이미지 좌로 움직이기(연속) | 여러 이미지를 감싸는 slider__wrap을 일정 시간 간격마다 좌로 이동해서 이미지가 움직이는 것처럼 보이게 해줍니다. 여기에 더해 첫번째 위치한 사진을 뒤에 한번 더 나오도록 해주고 리셋시켜 처음부터 다시 반복해서 나오도록 설정해줍니다. slider__wrap 좌로 이동 ☛ 첫번째 사진 마지막 사진 뒤로 복사 ☛ 마지막 사진 위치했을 때, 초기화 설정 첫번째 사진을 복사하는 이유; 복사하.. 2022. 9. 4. SLIDER | 이미지 슬라이더 | 좌로 넘기기 SLIDER 효과_좌로 움직이는 이미지를 만들어보자 ! SLIDER 효과 중 이미지가 좌로 움직이는 효과를 만들어 봅시다. 원본 페이지 내에서도 소스보기를 통해 코드를 바로 확인해보실 수 있습니다^0^ 원본 소스 보기 script를 살펴봅시다 ! 이미지 좌로 움직이기 | 여러 이미지를 감싸는 slider__wrap을 일정 시간 간격마다 좌로 이동해서 이미지가 움직이는 것처럼 보이게 해줍니다. currentIndex = (currentIndex +1) % sliderCount; | 이 밖의 if 조건문을 사용할 수도 있습니다. 2022. 8. 29. SLIDER | 이미지 슬라이더 | transition 효과 SLIDER 효과를 만들어보자 ! SLIDER 효과를 통해 이미지가 넘어가는 페이지를 만들어봅시다. 원본 페이지 내에서도 소스보기를 통해 코드를 바로 확인해보실 수 있습니다^0^ 원본 소스 보기 script를 살펴봅시다 ! setInterval(() =>{},2000) | 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용하는 함수입니다.(2000 = 2초) let nextIndex = (currentIndex + 1) % sliderCount; | 나머지 값을 활용해서 이미지가 순서대로 나올 수 있도록 해줍니다. 2022. 8. 29. 이전 1 다음
