슬라이드 이펙트 여섯번째
HTML
<body class="img05 bg05 font05">
<header id="header">
<h1>Javascript Slider Effect03</h1>
<p>슬라이드 이펙트 기본적인 효과 : 트랜지션 효과</p>
<ul>
<li><a href="sliderEffect01.html">1</a></li>
<li><a href="sliderEffect02.html">2</a></li>
<li><a href="sliderEffect03.html">3</a></li>
<li><a href="sliderEffect04.html">4</a></li>
<li><a href="sliderEffect05.html">5</a></li>
<li class="active"><a href="sliderEffect06.html">6</a></li>
</ul>
</header>
<!-- header -->
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider s1"><img src="./img/Effect_bg01.jpg" alt="이미지1"></div>
<div class="slider s2"><img src="./img/Effect_bg02.jpg" alt="이미지2"></div>
<div class="slider s3"><img src="./img/Effect_bg03.jpg" alt="이미지3"></div>
<div class="slider s4"><img src="./img/Effect_bg04.jpg" alt="이미지4"></div>
<div class="slider s5"><img src="./img/Effect_bg05.jpg" alt="이미지5"></div>
</div>
</div>
<div class="slider__btn">
<a href="#" class="prev" title="이전이미지">prev</a>
<a href="#" class="next" title="다음이미지">next</a>
</div>
<div class="slider__dot">이미지1</div>
<!-- <div class="dot">이미지2</div>
<div class="dot">이미지3</div>
<div class="dot">이미지4</div>
<div class="dot">이미지5</div> -->
</div>
</main>
<!-- main -->
<!-- <footer id="footer">
<a href="mailto:kshkmn0929@naver.com">kshkmn0929@naver.com</a>
</footer> -->
<!-- footer -->CSS
<style>
/* slider__wrap */
.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; /* 총이미지 */
height: 2250px;
}
/* 개별적인 이미지 */
.slider {
/* position: relative; */
width: 800px;
height: 450px;
}
.slider__btn a{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: #fff;
line-height: 50px;
text-align: center;
transition: all 0.6s;
}
.slider__btn a:hover {
border-radius: 50%;
background-color: rgba(241, 96, 86, 1);
color: #fff;
}
.slider__btn a.prev{
left: 0;
}
.slider__btn a.next{
right: 0;
}
.slider__dot {
position: absolute;
/* left: 50%; */
bottom: 50px;
translate: translateX(-50%);
}
.slider__dot .dot{
width: 20px;
height: 20px;
background-color: rgba(0, 0, 0, 1);
display: inline-block;
border-radius: 50%;
text-indent: -9999px;
transition: all 0.3s;
margin: 3px;
}
.slider__dot .dot.active{
background-color: rgba(255 , 255, 255, 1);
}
</style>JAVASCRIPT
<script>
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); //
const sliderInner = sliderWrap.querySelector(".slider__inner");
const slider = sliderWrap.querySelectorAll(".slider"); // slider를 배열로 받으므로 하나하나 선택할경우 배열로 선택 가능하다.
const sliderDot = sliderWrap.querySelector(".slider__dot"); // 닷메뉴
const sliderBtn = sliderWrap.querySelectorAll(".slider__btn a"); // 버튼
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderWidth = slider[0].offsetWidth; // 이미지 가로값
let sliderInterval = 2000;
let dotIndex = "";
function init(){
slider.forEach(() => dotIndex += "<a href='#' class='dot'>이미지</a>");
//이미지 갯수 만큼 메뉴 생성
sliderDot.innerHTML = dotIndex;
//첫번째 닷 메뉴한테 활성화 표시하기
sliderDot.firstChild.classList.add("active");
}
init();
let dotActive = document.querySelectorAll(".slider__dot .dot");
//닷 버튼을 누르면 이미지 넘어가기
dotActive.forEach((el,i) => {
el.addEventListener("click",function(){
sliderDot.querySelector(".dot.active").classList.remove("active");
el.classList.add("active");
gotoSlider(i);
});
});
//이미지 이동시키기
function gotoSlider(num){
sliderInner.style.transition = "all 400ms";
sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";
currentIndex = num;
//닷메뉴 활성화하기
let dotActive = document.querySelectorAll(".slider__dot .dot");
dotActive.forEach((active) => active.classList.remove("active"));
dotActive[num].classList.add("active");
}
//버튼을 클릭했을 때
sliderBtn.forEach((btn, index) => {
btn.addEventListener("click",() =>{
let prevIndex = (currentIndex + (sliderCount-1)) % sliderCount;
let nextIndex = (currentIndex + 1) % sliderCount; //123401234
console.log(prevIndex)
if(btn.classList.contains("prev")){
gotoSlider(prevIndex);
}else{
gotoSlider(nextIndex);
}
});
});
</script>JAVASCRIPT 설명
// 닷 버튼을 누르면 이미지 넘어가기
이미지 슬라이더에 있는 닷 메뉴를 클릭하면 해당 이미지로 이동하도록 하는 기능입니다.
설명을 자세히 보면, 먼저 init() 함수를 통해 이미지 갯수만큼 닷 메뉴를 생성하고, 첫번째 닷 메뉴에 'active' 클래스를 추가하여 활성화 시킵니다.
그 후, dotActive 변수에 모든 닷 메뉴를 선택하여 forEach() 메소드를 이용하여 클릭 이벤트를 등록합니다. 클릭 이벤트 발생 시, 눌린 닷 메뉴에 'active' 클래스를 추가하고, 현재 활성화되어 있는 닷 메뉴의 'active' 클래스를 제거합니다.
gotoSlider() 함수를 호출하면서 클릭한 닷 메뉴의 인덱스 값을 전달합니다. gotoSlider() 함수는 해당 인덱스 번호에 해당하는 이미지로 이동시킵니다. 이때, 현재 이미지의 인덱스 값을 저장하고, 닷 메뉴에서 현재 활성화된 메뉴를 찾아 'active' 클래스를 추가합니다.
이렇게 하면 닷 메뉴를 클릭하면 해당하는 이미지로 이동할 수 있습니다.
// 이미지 이동시키기
gotoSlider() 함수를 호출하여 이미지 슬라이더를 이동시키는 부분입니다.
gotoSlider() 함수에서는 인자로 전달된 num 값에 따라서 sliderInner의 transform 속성 값을 변경하여 이미지를 이동시킵니다. transform: translateX()를 이용하여 가로 방향으로 이미지를 이동시키는데, 이때 이동 거리는 -sliderWidth * num으로 계산됩니다.
currentIndex 변수에도 현재 보이는 이미지의 인덱스를 저장하고, 이전에 활성화된 닷 메뉴의 'active' 클래스를 제거하고, 현재 이미지에 해당하는 닷 메뉴에 'active' 클래스를 추가합니다. 이렇게 하면 이미지 이동과 함께 닷 메뉴도 자동으로 변경됩니다.
또한, sliderInner의 transition 속성을 이용하여 이미지 이동 애니메이션을 추가할 수 있습니다. 현재 설정된 값은 400ms로 설정되어 있습니다. 이 애니메이션은 이미지 이동 시 부드러운 전환 효과를 줍니다.
이렇게 하면 버튼 클릭 또는 닷 메뉴 클릭에 따라 이미지 슬라이더가 이동하고, 닷 메뉴와 현재 보이는 이미지가 자동으로 변경됩니다.
// 버튼을 클릭했을 때
prev 또는 next 클래스를 가진 버튼을 클릭하면 gotoSlider() 함수가 호출되어, 현재 이미지를 이전 이미지로 이동시키거나 다음 이미지로 이동시킵니다.
이전 이미지로 이동시키는 경우, prevIndex 변수에 (currentIndex + (sliderCount-1)) % sliderCount 값을 할당합니다. 이 때 sliderCount는 전체 이미지 갯수를 뜻하며, % 연산자를 사용하여 인덱스가 0 이하인 경우 마지막 이미지로 이동하도록 합니다.
다음 이미지로 이동시키는 경우, nextIndex 변수에 (currentIndex + 1) % sliderCount 값을 할당합니다. 이 때 % 연산자를 사용하여 인덱스가 sliderCount-1을 초과하는 경우 첫번째 이미지로 이동하도록 합니다.
그리고 gotoSlider() 함수를 호출하여 이동된 이미지를 화면에 표시합니다. 이렇게 하면 prev 또는 next 클래스를 가진 버튼을 클릭하여 이미지 슬라이더를 이동시킬 수 있습니다.