슬라이드이펙트2 슬라이드 이펙트 - 이미지 슬라이드(버튼) 슬라이더 효과 슬라이드 이펙트 - 이미지 슬라이드(버튼) 좌 우에 버튼을 만든 후 버튼을 누를때마다 다음 사진으로 넘어가는 효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 버튼과 배경사진 바뀌는 사진을 만들어줍니다. 소스 보기 prev next CSS 작성 CSS는 이전 예제와 크게 바뀐거 없이 버튼만 만들어줍니다. 소스 보기 @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slid.. 2022. 9. 18. 슬라이더 이펙트 - 좌로 움직이기(연속) 슬라이더 효과 슬라이드 이펙트 - 좌로 움직이기(연속적으로) 이번에는 사진을 우에서 좌로 한칸씩 땡겨가면서 다음사진으로 넘어가고, 5개의 사진이 연속적으로 계속 나오는 슬라이드를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 CSS 작성 이미지 5번에서 1번으로 돌아갈때 부드럽게 넘어가기 위하여 가상변수6번도 이미지1번으로 만들어줍니다. @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .s.. 2022. 9. 1. 이전 1 다음
