Effect/slider5 슬라이드 이펙트 05 슬라이드 이펙트05 이미지 슬라이드 (버튼, 닷메뉴) 원본 소스 보기 원본 페이지 보기 HTML prev next CSS /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모 : 움직이는 부분 */ display: flex; flex-wrap: wrap; width: 4800px; /*총 이미지 6개 */ .. 2022. 10. 14. 슬라이드 이펙트 04 슬라이드 이펙트04 이번 이미지는 자동 슬라이드가 아닌 버튼을 클릭하는 구조입니다. 원본 소스 보기 원본 페이지 보기 HTML prev next CSS /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모 : 움직이는 부분 */ display: flex; flex-wrap: wrap; width: 4800p.. 2022. 9. 19. 슬라이드 이펙트 03 슬라이드 이펙트03 원본 소스 보기 원본 페이지 보기 HTML <section id="sliderType01"> <div class="slider__wrap"> <div class="slider__img"> <div class="slider__inner"> <div class="slider"><img src="../assets/img3/effect_bg11-min.jpg" alt="이미지"></div> <div class="slider"><img src="../assets/img3/effect_bg12-min.jpg" alt="이미지"></div> <div class="slider"><img src="../assets/im.. 2022. 9. 1. 슬라이드 이펙트 02 슬라이드 이펙트02 5개의 이미지가 가로로 정렬되어 있다. 1 2 3 4 0 1 2 3 4 0 ... 반복 원본 소스 보기 원본 페이지 보기 HTML <main id="main"> <section id="sliderType01"> <div class="slider__wrap"> <div class="slider__img"> <div class="slider"><img src="../assets/img3/effect_bg11-min.jpg" alt="이미지"></div> <div class="slider"><img src="../assets/img3/effect_bg12-min.jpg" alt="이미지"></div> <div cla.. 2022. 8. 29. 슬라이드 이펙트01 슬라이드 이펙트01 트랜지션 효과 원본 소스 보기 원본 페이지 보기 HTML <main id="main"> <section id="sliderType01"> <div class="slider__wrap"> <div class="slider__img"> <div class="slider"><img src="../assets/img3/effect_bg11-min.jpg" alt="이미지"></div> <div class="slider"><img src="../assets/img3/effect_bg12-min.jpg" alt="이미지"></div> <div class="slider"><img src="../assets/img3/.. 2022. 8. 29. 이전 1 다음
