728x90
슬라이드 효과를 자동으로 나타내기
전체 소스는 요기
body를 볼게요 !
<body class="img06 bg07 font07">
<header id="header">
<h1>Javascript slider Effect06</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>
<li ><a href="sliderEffect07.html">7</a></li>
</ul>
</header>
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider s1"><img src="./img/slideEffect01-min.jpg" alt="이미지6"></div>
...
<div class="slider s5"><img src="./img/slideEffect10-min.jpg" alt="이미지10"></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">
/*닷버튼영역*/
</div>
</div>
</main>
</body>위처럼 body영역엔 이미지만 넣어줬어요 !
css영역을 볼게요
/* 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: 450px;
}
/* 개별적인 이미지 */
.slider {
width: 800px;
height: 450px;
}
.slider__btn a{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: rgba(9, 0, 107, 0.4);
color: #fff;
line-height: 50px;
text-align: center;
transition: all 0.6s;
}
.slider__btn a:hover {
border-radius: 50%;
background-color: rgba(9, 0, 107, 0.1);
color: #fff;
}
.slider__btn a.prev{
left: 0;
}
.slider__btn a.next{
right: 0;
}
.slider__dot {
position: absolute;
bottom: 50px;
translate: translateX(-50%);
}
.slider__dot .dot{
width: 20px;
height: 20px;
background-color: rgba(0, 0, 0, 0.5);
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, 0.5);
}.slider__inner 는 전체 이미지를 감싸고 있는 부모박스 : 이미지가 움직이는 영역이에용
이미지가 보이는 영역 을 설정해줬어요 width와 height를 설정하고
.slider__img에 orverflow : hidden 을 줘서 일부만 보이도록 했습니다.
아래는 이미지 & prev & next & 하단 dot버튼을 전부표시했어요
script 선언하는 부분을 볼게용
const sliderWrap =document.querySelector(".slider__wrap");
const sliderImg =sliderWrap.querySelector(".slider__img"); //보여지는영역
const sliderInner =sliderWrap.querySelector(".slider__inner"); //움직이는영역
const slider =sliderWrap.querySelectorAll(".slider"); //개별이미지
const sliderDot = sliderWrap.querySelector(".slider__dot"); //닷메뉴
const sliderBtn = sliderWrap.querySelectorAll(".slider__btn a"); //버튼
let currentIndex = 0 ; //현재 보이는 이미지 ★ 기준점
let sliderCount = slider.length; //전체 이미지 갯수
let sliderInterval = 1000; //이미지 변경 간격 시간
let sliderWidth= slider[0].offsetWidth; //가로값 가져오기
let dotIndex ="";
function init(){
//이미지 갯수만큼 닷메뉴 생성
slider.forEach(()=>dotIndex += "<a href='#'' class='dot'></a>");
sliderDot.innerHTML=dotIndex;
// 첫번째 닷메뉴에게 활성화
sliderDot.firstChild.classList.add("active");
}
//초기화
init();먼저 선택자 & 변수를 세팅한뒤
변수들을 선언했고
init()함수를 로딩시 실행시켜
하단에 dot 버튼을 생성했습니다.
javascript 방식
//이미지 이동시키는 애니매이션
function gotoSlider(num){
sliderInner.style.transition = "all 400ms";
sliderInner.style.transform = "translateX("+ -sliderWidth*num +"px)";
//현제위치 세팅
currentIndex = num;
// console.log(currentIndex)
sliderDotBtn.forEach((active)=>active.classList.remove("active"));
sliderDotBtn[num].classList.add("active");
}
//버튼을 클릭했을떄
sliderBtn.forEach((btn, index)=>{
btn.addEventListener("click",()=>{
let prevIndex = (currentIndex+sliderCount-1)%sliderCount;
let nextIndex = (currentIndex+1)%sliderCount;
if(btn.classList.contains("prev")){
gotoSlider(prevIndex);
}else{
gotoSlider(nextIndex);
}
});
});
let sliderDotBtn = sliderWrap.querySelectorAll(".slider__dot .dot"); //닷메뉴
// 닷버튼 클릭했을때
sliderDotBtn.forEach((btn, index)=>{
btn.addEventListener("click",()=>{
gotoSlider(index);
})
})dot & prev & next 버튼을 클릭했을때
공통적으로 gotoslider을 호출시켜 서 화면 이동을구현하였어요