728x90
슬라이드 효과를 자동으로 나타내기
전체 소스는 요기
body를 볼게요 !
<header id="header">
<h1>Javascript slider Effect07</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 ><a href="sliderEffect06.html">6</a></li>
<li class="active"><a href="sliderEffect07.html">7</a></li>
</ul>
</header>
<!-- //header-->
<main id="main">
<div class="slider__wrap">
<div class="slider__img"></div>
<div class="slider__thumb"></div>
<div class="slider__btn">
<a href="#" class="prev" title="이전이미지">prev</a>
<a href="#" class="next" title="다음이미지">next</a>
</div>
</div>
</main>
<!-- //main-->
<footer id="footer">
<a href="mailto:getgrovy@gmail.com">getgrovy@gmail.com</a>
</footer>
<!-- //footer-->위처럼 body영역엔 이미지만 넣어줬어요 !
css영역을 볼게요
/* slider__wrap */
.slider__wrap {
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
width: 800px;
height: 450px;
box-shadow: 0 50px 100px rgba(0,0,0,0.3);
}
.slider__img{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.slider__img img {
position: absolute;
width: 100%;
height: 100%;
/* 아래랑 같음
background-size: cover; */
object-fit: cover;
opacity: 0;
transform: scale(1.3);
transition: all 500ms linear;
}
.slider__img img.active {
opacity: 1;
transform: scale(1);
}
.slider__thumb{
position: absolute;
left: 50%;
top: 50%;;
transform: translate(-50%,150px);
width: 100px;
/* 가운데정렬 */
display: flex;
justify-content: center;
/* 여백줄떄 */
gap: 10px;
}
.slider__thumb img{
cursor: pointer;
/* 안보이게 */
border: 2px solid transparent;
}
.slider__thumb img.active{
border: 2px solid rgba(255,255,255,0.7);
}
.slider__btn a{
position: absolute;
top: 0;
width: 40px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
color: #fff;
background-color: rgba(0,0,0,0.2);
transition: all 300ms ease-in-out;
}
.slider__btn a.next{
right: 0;
}
.slider__btn a:hover{
background-color: rgba(255,255,255,0.2);
}css는 에서는 썸네일 이미지를 클릭했을때 opacity를 줘서 이미지 전환하는 active class를 설정했어요
그리고 dot버튼 & 썸네일 & prev , next 버튼 디자인을 했습니다.
script 부분을 볼게용
//선택자
let images=[
"./img/slideEffect07-min.jpg",
"./img/slideEffect04-min.jpg",
"./img/slideEffect06-min.jpg",
"./img/slideEffect03-min.jpg",
"./img/slideEffect05-min.jpg"
];
function imageSlider(parent,images){
let currentIndex = 0 ; //현재 보이는 이미지
// 선택자
let slider = {
parent: parent,
images: parent.querySelector(".slider__img"),
thumnails: parent.querySelector(".slider__thumb"),
prevBtn: parent.querySelector(".slider__btn .prev"),
nextBtn: parent.querySelector(".slider__btn .next")
};
}
imageSlider(document.querySelector(".slider__wrap"),images);먼저 선택자 & 변수를 세팅한뒤
변수들을 선언했고
slider에 값을 넣어줄거에요
//이미지 출력하기 push작업하면 join안씀
slider.images.innerHTML = images.map((image,index) =>{
return `<img src="${image}" alt="이미지${index+1}">`;
}).join('');
//첫번째이미지 active활성화하기
let imageNodes = slider.images.querySelectorAll("img");
imageNodes[currentIndex].classList.add("active");
//썸넬 이미지 출력
slider.thumnails.innerHTML = slider.images.innerHTML;
//첫번째 썸넬 이미지 active활성화하기
// slider.thumnails.firstChild.classList.add("active");
//첫번째 썸넬 이미지 active활성화하기
let thumnailNodes = slider.thumnails.querySelectorAll("img");
thumnailNodes[currentIndex].classList.add("active");
//썸네일 이미지 클릭하기
thumnailNodes.forEach((thumnailChild , index)=> {
thumnailChild.addEventListener("click",()=>{
slider.thumnails.querySelector("img.active").classList.remove("active");
thumnailNodes[index].classList.add("active");
imageNodes[currentIndex].classList.remove("active");
currentIndex=index;
imageNodes[currentIndex].classList.add("active");
})
});
//왼쪽 버튼 클릭하기
slider.prevBtn.addEventListener("click",()=>{
imageNodes[currentIndex].classList.remove("active");
thumnailNodes[currentIndex].classList.remove("active");
currentIndex--;
if(currentIndex<0)currentIndex=images.length-1;
imageNodes[currentIndex].classList.add("active");
thumnailNodes[currentIndex].classList.add("active");
})
//오른쪽 버튼 클릭하기
slider.nextBtn.addEventListener("click",()=>{
imageNodes[currentIndex].classList.remove("active");
// thumnailNodes[currentIndex].classList.remove("active");
slider.thumnails.querySelector("img.active").classList.remove("active");
currentIndex++;
currentIndex = (currentIndex)%images.length;
imageNodes[currentIndex].classList.add("active");
thumnailNodes[currentIndex].classList.add("active");
})
위 스크립트중 중요한부분을 볼게용 !
1. slider.images.innerHTML = images.map((image,index) =>{
return `<img src="${image}" alt="이미지${index+1}">`;
}).join('');
이미지 출력하는거에요 map으로 반복해줬어요
2. 첫번째이미지 active활성화하기
let imageNodes = slider.images.querySelectorAll("img");
imageNodes[currentIndex].classList.add("active");
3. 썸네일 이미지 클릭하기
thumnailNodes.forEach((thumnailChild , index)=> {
썸넬이미지 클릭시이벤트를 줘서
기존 활성화된 active를 remove시키고 활성화할곳인 add시켜줬어요
thumnailChild.addEventListener("click",()=>{
slider.thumnails.querySelector("img.active").classList.remove("active");
thumnailNodes[index].classList.add("active");
imageNodes[currentIndex].classList.remove("active");
currentIndex=index;
imageNodes[currentIndex].classList.add("active");
})
});
etc currentIndex ??
여태 슬라이드 이팩트 html을 만들면서
this를 쓰기도 했고 currentIndex=0 으로 초기화도 해보니
전역변수로 currentIndex를 쓰면서 기준을 잡고 어떻게 움직임을 줄까 하는걸 생각할수있었어요