100S00

슬라이드 07 이번 슬라이드 유형은 썸네일 이미지와 썸네일 이미지를 누르면 이미지까지 바뀌는 효과를 내주려 합니다. html 코드 Javasrcipt slider Effect07 슬라이드 이펙트 : 썸네일 슬라이드 1 2 3 4 5 6 7 prev next esansi@naver.com 이번엔 이미지를 변수의 배열로 넣어 작업하였습니다. let images = [ "./img/slider06-min.jpg", "./img/slider04-min.jpg", "./img/slider09-min.jpg", "./img/slider07-min.jpg", "./img/slider04-min.jpg", ]; 그리고 선택자 또한 다른 방법으로 사용했다. function imageSlider(parent, images..

슬라이드 유형 06 이번 유형은 버튼을 클릭하여 다음 슬라이드로 넘기는 작업을 해보았습니다. 추가적으로 지금 슬라이드가 어디있는지 동그란 이미지로 보여주는 효과도 넣어 주는 작업까지 해보았습니다. prev next html 코드 main 섹션 안에 slider__btn 을 만들어줍니다. 이 버튼은 이미지 양 끝 좌우에 다음 이미지 이전 이미지로 넘어가게 하는 버튼입니다. a태그를 사용하여 class이름을 각각 prev ,next로 지어줍니다. 그리고 이번에 dot버튼을 만들어줍니다. slider__dot 은 같은 코드를 반복 해서 써주기 때문에 스크립트 코드로 넣어주려한다. css코드 /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; disp..

슬라이드 05 이번 유형은 슬라이드가 위로 올라가는 유형이다. 4번과 비슷한 구조이지만 sliderInner가 x축과 y축으로 움직인다는 차이가 있다. .slider__inner { /*전체 이미지를 감싸고 있는 부모 : 움직이는 영역*/ display: flex; flex-wrap: wrap; width: 800px; height: 2700px; } .slider { /*개별적인 이미지*/ position: relative; width: 800px; height: 450px; } slider__inner 부분에 height 값을 이미지의 갯수 * 450 으로 설정해야합니다. 하나의 이미지가 복사 되어 총 이미지는 6개이므로 6 * 450 = 2700을 설정해주었습니다. script let current..

슬라이드04 슬라이드 4번 유형은 5번 이미지에 왔을때 그 뒤에 1번이 나오도록 1번을 복사 해서 연속적이게 보여주게 할 것 입니다. 변수인 let sliderClone = sliderInner.firstElementChild.cloneNode(true);를 만들어줍니다. 이 변수는 sliderInner의 첫번째 자식 요소를 그 요소를 유지한 상태로 하나 더 생성해줍니다. 그 후 appendChild를 사용하여 sliderInner 뒤에 복사한 요소를 위치 시켜 줍니다. sliderInner.appendChild(sliderClone); 그렇게 되면 이미지는 1번 2번 3번 4번 5번 1번 으로 나오게 됩니다. let sliderClone = sliderInner.firstElementChild.clon..

슬라이드 이펙트 03 2번은 이미지가 오른쪽에서 왼쪽으로 넘어가게 해주는 슬라이드 효과입니다. htnl에 이미지를 담는 박스 하나가 더 추가 되었고 css와 script 부분이 조금 수정되었습니다. 이미지 전체를 움직이기 위해 inner 박스로 이미지를 감싸 주었습니다. .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 { /*전체 이미지를 감싸고 있는 부모 : ..

슬라이드 이펙트 02 2번은 이미지가 오른쪽에서 왼쪽으로 넘어가게 해주는 슬라이드 효과입니다. htnl에 이미지를 담는 박스 하나가 더 추가 되었고 css와 script 부분이 조금 수정되었습니다. 이미지 전체를 움직이기 위해 inner 박스로 이미지를 감싸 주었습니다. .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 { /*전체 이미지를 감싸고 있는 부모 : ..

슬라이드 이펙트 01 html 코드 이미지를 5개를 넣기 위해 div박스 5개를 만들어 줍니다. .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 { position: absolute; left: 0; top: 0; transition: all 0.4s; } .slider::before { position: absolute; left: 5px; top: 5px; background: rgba(0,0,0,..