버튼을 클릭하면 명언이 나와요
-이름이 나와요
최종 완성본
오늘은 슬라이드 만들기를 배웠습니다.
API 없이 직접 코드로 짜는 연습을 먼저 했습니다.
HTML + 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 {
/* absolute가 before의 relative 역할을 해줌 */
position: absolute;
left: 0;
top: 0;
transition: all 0.3s;
}
.slider::before {
position: absolute;
left: 5px;
top: 5px;
background: rgba(0, 0, 0, 0.4);
color: #fff;
padding: 5px 10px;
}
.slider:nth-child(1)::before {content: "이미지1"; }
.slider:nth-child(2)::before {content: "이미지2"; }
.slider:nth-child(3)::before {content: "이미지3"; }
.slider:nth-child(4)::before {content: "이미지4"; }
.slider:nth-child(5)::before {content: "이미지5"; }
.slider:nth-child(1) { z-index: 5;}
.slider:nth-child(2) { z-index: 4;}
.slider:nth-child(3) { z-index: 3;}
.slider:nth-child(4) { z-index: 2;}
.slider:nth-child(5) { z-index: 1;}
</style>
</head>
<body class="img01 bg01 font01">
<header id="header">
<h1>Javascript Slider Effect01</h1>
<p>슬라이드 이팩터</p>
<ul>
<li class="active"><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="sliderEffect04html">4</a></li>
<li><a href="sliderEffect05.html">5</a></li>
</ul>
</header>
<!-- //header -->
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider"><img src="./img/slider_bg07b.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/slider_bg08b.jpg" alt="이미지2"></div>
<div class="slider"><img src="./img/slider_bg03b.jpg" alt="이미지3"></div>
<div class="slider"><img src="./img/slider_bg04b.jpg" alt="이미지4"></div>
<div class="slider"><img src="./img/slider_bg06b.jpg" alt="이미지5"></div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:skadldldl123@gmail.com">mailto:skadldldl123@gmail.com</a>
</footer>
<!-- //footer -->
</body>코드 설명
(처음이라 슬라이드 배치 방법이 이해가 안가서 쳐보고 이해를 했습니다.)
1.div태그인 .slider__wrap은 전체적인 내용물들을 가운데로 배치해줍니다.
(align-items는 안먹혀서 height값을 줬습니다.)
2.div태그 .slider__img는 .slider의 보여줄 만큼의 width를 주고 overflow를 줍니다.
(여기에서는 이제 보여줄 width의 값만큼 지정해주고 overflow 해줍니다.)
3.1번쨰 슬라이드의 div태그 .slider은 지금은 absolute를 줘서 한곳에 모이게 할것이기 떄문에 absolute를 줍니다.
(2번째 슬라이드는 absolute를 사용하지 않습니다.)
JAVASCRIPT + GSAP 코드
<script>
// 선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");
const slider = sliderWrap.querySelectorAll(".slider");
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //이미지 갯수
let sliderInterval = 3000; //이미지 간격 시간
// 특정 시간마다 실행되게 해줌
// setInterval(() => {
// // 1 % 5 = 1 / 2 % 5 = 2 / 3 % 5 = 3 / 4 % 5 = 4 / 5 % 5 = 0
// let nextIndex = (currentIndex + 1) % sliderCount;
// slider[currentIndex].style.opacity = "0";
// slider[nextIndex].style.opacity = "1";
// currentIndex = nextIndex;
// console.log(currentIndex);
// // 첫번째 이미지를 안보이게 해주고
// // 두번째 이미지를 보이게 작업
// // slider[0].style.opacity = "0"; //첫번째 이미지 안보이게
// // slider[1].style.opacity = "1"; //두번쨰 이미지를 보이게
// // slider[1].style.opacity = "0"; //두번 째 이미지를 안보이게
// // slider[2].style.opacity = "1"; //세번쨰 이미지를 보이게
// // slider[2].style.opacity = "0"; //세번째 이미지 안보이게
// // slider[3].style.opacity = "1"; //네번쨰 이미지를 보이게
// // slider[3].style.opacity = "0"; //네번째 이미지 안보이게
// // slider[4].style.opacity = "1"; //다섯번쨰 이미지를 보이게
// // slider[4].style.opacity = "0"; //다섯번째 이미지 안보이게
// // slider[0].style.opacity = "1"; //첫번쨰 이미지를 보이게
// }, sliderInterval);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
// gsap
setInterval(() => {
let nextIndex = (currentIndex + 1) % sliderCount;
slider[currentIndex].style.opacity = "0";
slider[nextIndex].style.opacity = "1";
gsap.to(slider[currentIndex], {
opacity: "0"
});
gsap.to(slider[nextIndex], {
opacity: "1"
});
currentIndex = nextIndex;
}, 3000);
</script>
<script>
// jquery 아직 먼저 티스토리부터~~~
</script>코드설명
1.
// 선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");
const slider = sliderWrap.querySelectorAll(".slider");querySelector로 태그, 클래스, 아이디를 찾습니다.
2.
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //이미지 갯수
let sliderInterval = 3000; //이미지 간격 시간이 변수는 setinterval을 통해서 숫자를 더하고 데이터를 전달할 것들입니다.
sliderInterval은 setinterval에서 시간(3초)입니다.
sliderCount는 이제 이미지의 개수입니다.
currentIndex는 이제 +1씩 더해지면 그 데이터를 그냥 저장시켜 줄 변수입니다.
3.
setInterval(() => {
// 1 % 5 = 1 / 2 % 5 = 2 / 3 % 5 = 3 / 4 % 5 = 4 / 5 % 5 = 0
let nextIndex = (currentIndex + 1) % sliderCount;
slider[currentIndex].style.opacity = "0";
slider[nextIndex].style.opacity = "1";
currentIndex = nextIndex;
console.log(currentIndex);
}, sliderInterval);
let nextIndex는 3초마다 1씩 더한 값을 5(이미지 개수)와 나눈 나머지를 구하고 nextIndex에 저장합니다.
1번째 시작 : slider(이미지)를 0번지에 꺼내고 opacity 0을 숨겨 줍니다.
그리고 nextIndex에서 1이 증가된 값으로 slider(이미지)의 1번지를 oacpity 1로 보여줍니다.
그럼 nextIndex의 1의 값을 currentIndex 1에 저장 시킵니다.
2번째 시작 : slider(이미지)를 1번지에 꺼내고 opacity 0을 숨겨 줍니다.
그리고 nextIndex에서 2가 증가된 값으로 slider(이미지)의 2번지를 oacpity 1로 보여줍니다.
그럼 nextIndex의 2의 값을 currentIndex 2에 저장 시킵니다.
3번째 시작 : slider(이미지)를 2번지에 꺼내고 opacity 0을 숨겨 줍니다.
그리고 nextIndex에서 3가 증가된 값으로 slider(이미지)의 3번지를 oacpity 1로 보여줍니다.
그럼 nextIndex의 3의 값을 currentIndex 3에 저장 시킵니다.
4번째 시작 : slider(이미지)를 3번지에 꺼내고 opacity 0을 숨겨 줍니다.
그리고 nextIndex에서 4가 증가된 값으로 slider(이미지)의 4번지를 oacpity 1로 보여줍니다.
그럼 nextIndex의 4의 값을 currentIndex 4에 저장 시킵니다.
5번째 시작 : slider(이미지)를 4번지에 꺼내고 opacity 0을 숨겨 줍니다.
그리고 nextIndex에서 5가 증가된 값으로 slider(이미지)의 5번지를 oacpity 1로 보여줍니다.
그럼 nextIndex의 5의 값을 currentIndex 2에 저장 시킵니다.
4. gsap 활용
<script>
// gsap
setInterval(() => {
let nextIndex = (currentIndex + 1) % sliderCount;
slider[currentIndex].style.opacity = "0";
slider[nextIndex].style.opacity = "1";
gsap.to(slider[currentIndex], {
opacity: "0"
});
gsap.to(slider[nextIndex], {
opacity: "1"
});
currentIndex = nextIndex;
}, 3000);
</script>단순합니다.
위에서 사용한 코드를 그대로 사용하고 단지 slider의 배열에 접근해서 opacity:0과 1을 반복하면 끝입니다.
