Script Sample/Slider Effect에 관한글 (8)
sliderEffect08 - 무한, 버튼 추가, 닷 버튼 추가, 자동 플레이, 시작 버튼, 정지 버튼

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect08.html const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); //이미지 움직이는 영역 const slider = document.querySelectorAll(".slider"); //5개의 이미지 저장 const sliderBtn = document.querySelector(".slide..
Script Sample/Slider Effect
sliderEffect07 - 무한, 버튼 추가, 닷 버튼 추가

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect07.html const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); //이미지 움직이는 영역 const slider = document.querySelectorAll(".slider"); //5개의 이미지 저장 const sliderBtn = document.querySelector(".slide..
Script Sample/Slider Effect
sliderEffect06 - 닷 버튼 추가

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect06.html const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //sliderImg에 클래스 slider__img(이미지 보이는 영역) 저장 const sliderInner = document.querySelector(".slider__inner"); //sliderInner에 클래스 slider__inner(이미지 움직이는 영역) 저장 const slider = document.querySelectorAll(".slide..
Script Sample/Slider Effect
sliderEffect05 - 버튼 추가

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect05.html const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //sliderImg에 클래스 slider__img(이미지 보이는 영역) 저장 const sliderInner = document.querySelector(".slider__inner"); //sliderInner에 클래스 slider__inner(이미지 움직이는 영역) 저장 const slider = document.querySelectorAll(".slide..
Script Sample/Slider Effect
sliderEffect04 - 위로 움직이기

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect04.html const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //sliderImg에 클래스 slider__img(이미지 보이는 영역) 저장 const sliderInner = document.querySelector(".slider__inner"); //sliderInner에 클래스 slider__inner(이미지 움직이는 영역) 저장 const slider = document.querySelectorAll(".slide..
Script Sample/Slider Effect
sliderEffect03 - 연속적으로 움직이기

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect03.html const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //sliderImg에 클래스 slider__img(이미지 보이는 영역) 저장 const sliderInner = document.querySelector(".slider__inner"); //sliderInner에 클래스 slider__inner(이미지 움직이는 영역) 저장 const slider = document.querySelectorAll(".slide..
Script Sample/Slider Effect
sliderEffect02 - 좌로 움직이기

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect02.html const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //sliderImg에 클래스 slider__img(이미지 보이는 영역) 저장 const sliderInner = document.querySelector(".slider__inner"); //sliderInner에 클래스 slider__inner(이미지 움직이는 영역) 저장 const slider = document.querySelectorAll(".slide..
Script Sample/Slider Effect
sliderEffect01 - 페이드 효과

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect01.html const sliderWrap = document.querySelector(".slider__wrap");//변수 sliderWrap에 클래스 slider__wrap 저장 const sliderImg = document.querySelector(".slider__img");//변수 sliderImg에 클래스 slider__img 저장 const slider = document.querySelectorAll(".slider");//변수 slider에 클래스 slider 저장 let currentIndex = 0; //현재 보이는 이미지 let sliderCount = s..
Script Sample/Slider Effect
1
© 2018 webstoryboy