슬라이드 효과 만들기
이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다.
슬라이드 효과 : 이미지 슬라이드(버튼, 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이)
이번 슬라이드 효과는 이전의 유형에 자동 플레이 기능을 추가하였으며,자동 플레이를 정지하거나 플레이 할 수 있는 버튼을 추가하고, 마우스 커서가 올라가면 자동 플레이가 멈추고, 커서가 빠져나가면 자동 플레이가 시작되는 기능을 추가하였습니다.
HTML 코드
슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. 여기까지는 이전 유형과 같지만, 이번에는 슬라이드를 넘길 버튼이 필요하기 때문에, slider__img 클래스의 형제 요소로 slider__btn 클래스의 div박스를 만들어 각각의 클래스가 prev, next인 a태그로 버튼을 만들어 주었습니다. 또한, 닷메뉴를 만들기 위해 slider__dot을 만들고 dot들을 만들엇습니다. dot은 스크립트를 이용해 작성해줄 예정이기 때문에 스타일을 작성한 후 주석 처리 해주었습니다.
<main id="main">
<section id="sliderType01">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider"><img src="../assets/img/effect_img01-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="../assets/img/effect_img02-min.jpg" alt="이미지2"></div>
<div class="slider"><img src="../assets/img/effect_img03-min.jpg" alt="이미지3"></div>
<div class="slider"><img src="../assets/img/effect_img04-min.jpg" alt="이미지4"></div>
<div class="slider"><img src="../assets/img/effect_img05-min.jpg" alt="이미지5"></div>
</div>
</div>
<div class="slider__btn">
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>
</div>
<div class="slider__dot">
<!-- <a href="#" class="dot active"></a>
<a href="#" class="dot"></a>
<a href="#" class="dot"></a>
<a href="#" class="dot"></a>
<a href="#" class="dot"></a> -->
</div>
</div>
</section>
</main>
<!-- main -->
CSS 코드
이전 유형과 거의 동일하기 떄문에, dot 부분의 css만 작성하였습니다. 이번에는 dot 영역에 css를 이용해 플레이 버튼과 정지 버튼을 만들어 주었습니다.
/* slider__dot */
.slider__dot {
position: absolute;
left: 50%;
transform: translateY(-50%);
bottom: 20px;
}
.slider__dot .dot {
width: 20px;
height: 20px;
background: rgba(0,0,0,0.4);
display: inline-block;
border-radius: 50%;
text-indent: -9999px;
transition: all 0.3s;
margin: 3px;
}
.slider__dot .dot.active {
background: rgba(255, 255, 255, 0.9);
}
.slider__dot .play {
display: inline-block;
width: 20px;
height: 20px;
margin-left: 7px;
vertical-align: 4px;
/* css로 삼각형 만들기~ */
border-left: 15px solid #fff;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.slider__dot .stop {
display: inline-block;
width: 18px;
height: 20px;
margin-left: 7px;
position: relative;
vertical-align: 3px;
}
.slider__dot .stop::before {
content: '';
width: 6px;
height: 18px;
background: #fff;
position: absolute;
left: 0;
top: 0;
}
.slider__dot .stop::after {
content: '';
width: 6px;
height: 18px;
background: #fff;
position: absolute;
right: 0;
top: 0;
}
스크립트 작성하기
이미지 슬라이드를 하는 스크립트는 선택자를 만든 후, 각 이미지의 가로값을 구해 그 수치만큼 이동시킨다는 점이 이전의 유형과 같습니다. 닷메뉴를 슬라이드 순서에 맞게 활성화시키는 것과, 닷메뉴를 클릭하면 해당 슬라이드로 이동하는 점도 이전과 같으며 자동으로 넘어가는 기능이 추가되었습니다.
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img"); //보여지는 영역
const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역
const slider = document.querySelectorAll(".slider"); //각각의 이미지
const sliderDot = document.querySelector(".slider__dot"); //닷 메뉴
const sliderBtn = document.querySelector(".slider__btn"); //슬라이드 버튼
const sliderBtnPrev = document.querySelector(".slider__btn .prev"); //왼쪽 버튼
const sliderBtnNext = document.querySelector(".slider__btn .next"); //오른쪽 버튼
let currentIndex = 0, //현재 이미지의 인덱스
sliderLength = slider.length, //슬라이드의 갯수
sliderWidth = slider[0].offsetWidth, //슬라이드 이미지의 길이
sliderFirst = slider[0], //첫번째 슬라이드 이미지
sliderLast = slider[sliderLength-1], //마지막 슬라이드 이미지
cloneFirst = sliderFirst.cloneNode(true), //첫번째 이미지 복사
cloneLast = sliderLast.cloneNode(true), //마지막 이미지 복사
dotIndex = "",
interval = 3000, // 슬라이드 재생 시간 interval ms마다 넘어감
sliderTimer = "";
function init(){
imgClone(); // 슬라이드를 복사하는 함수
createDot(); // 닷메뉴를 만드는 함수
autoPlay(); //슬라이드 자동 재생 함수
}
init();
const sliderPlayBtn = document.querySelector(".slider__dot #playBtn");
function autoPlay(){
sliderTimer = setInterval(()=>{ //n초마다 실행
let intervalNum = currentIndex + 1; // 다음 이미지로 슬라이드 하기 위해 현재 인덱스 +1 값을 변수에 저장
gotoSlider(intervalNum); //저장한 값을 매개변수로 함수를 실행
}, interval);
}
function stopPlay(){
clearInterval(sliderTimer); // 자동 재생을 멈추는 경우 setInterval 메서드를 초기화 해주어야 반복이 중복되는 것을 방지할 수 있음
}
function imgClone(){
sliderInner.appendChild(cloneFirst);
sliderInner.insertBefore(cloneLast, sliderFirst);
}
function createDot(){
for(i=0; i<sliderLength; i++){
dotIndex += `<a href="#" class="dot"></a>`;
}
dotIndex += `<a href="#" id="playBtn" class="play"></a>`;
sliderDot.innerHTML = dotIndex;
sliderDot.firstElementChild.classList.add("active");
}
function gotoSlider(index){
sliderInner.classList.add("transition");
let posInitial = sliderInner.offsetLeft;
sliderInner.style.left = -sliderWidth * (index + 1) + "px";
currentIndex = index;
let sliderDotAcive = document.querySelectorAll(".slider__dot .dot"); // 이미지가 슬라이드 될 떄 해당하는 이미지에 active 클래스 주기
sliderDotAcive.forEach(el => el.classList.remove("active"));
sliderDotAcive[index].classList.add("active");
}
function checkIndex(){
sliderInner.classList.remove("transition");
console.log(currentIndex);
//마지막 이미지에서 처음으로 이동
if(currentIndex == sliderLength){
sliderInner.style.left = -(1 * sliderWidth) + "px"
currentIndex = 0;
}
//처음 이미지에서 마지막으로 이동
if(currentIndex == -1){
sliderInner.style.left = -(sliderLength * sliderWidth) + "px"
currentIndex = sliderLength - 1;
}
}
//버튼 눌렀을 떄
// 닷버튼 누르면 해당 이미지로 이동
document.querySelectorAll(".slider__dot .dot").forEach((dot, index)=>{
dot.addEventListener("click", ()=>{
gotoSlider(index);
});
});
//클릭 이벤트
sliderBtnPrev.addEventListener("click", ()=>{
let prevIndex = currentIndex -1;
gotoSlider(prevIndex);
});
sliderBtnNext.addEventListener("click", ()=>{
let nextIndex = currentIndex +1;
gotoSlider(nextIndex);
});
sliderPlayBtn.addEventListener("click", ()=>{
sliderPlayBtn.classList.toggle("play");
sliderPlayBtn.classList.toggle("stop");
if(sliderPlayBtn.className == "play"){ //해당 요소에 play 클래스가 있으면 자동재생을 실행, 아닌 경우에는 자동재생을 멈춤.
autoPlay();
} else { stopPlay(); }
});
sliderInner.addEventListener("mouseenter", stopPlay);
sliderInner.addEventListener("mouseleave", autoPlay);
sliderInner.addEventListener("transitionend", checkIndex);
'Effect > Slider Effect' 카테고리의 다른 글
슬라이드 이펙트 6 (1) | 2022.10.20 |
---|---|
슬라이드 이펙트 5 (1) | 2022.10.20 |
슬라이드 이펙트 4 (1) | 2022.09.18 |
슬라이드 이펙트 3 (20) | 2022.09.01 |
슬라이드 이펙트 2 (10) | 2022.08.29 |
댓글