“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
SLIDER EFFECT : 슬라이드 유형 웹페이지 만들기
왼쪽으로 자연스럽게 넘어가는 5페이지 짜리 슬라이드 만들기
완성화면
✈00.HTML
<body class="img01 bg01 font01">
<header id="header">
<h1>Javascript Slide Effect03</h1>
<p>슬라이드이펙트</p>
<ul>
<li><a href="slideEffect01.html">1</a></li>
<li><a href="slideEffect02.html">2</a></li>
<li><a href="slideEffect03.html">3</a></li>
<li class="active"><a href="slideEffect04.html">4</a></li>
<li><a href="slideEffect05.html">5</a></li>
<li><a href="slideEffect06.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="assets/img/slideEffect06-min.jpg" alt="이미지6"></div>
<div class="slider s2"><img src="assets/img/slideEffect07-min.jpg" alt="이미지7"></div>
<div class="slider s3"><img src="assets/img/slideEffect08-min.jpg" alt="이미지8"></div>
<div class="slider s4"><img src="assets/img/slideEffect09-min.jpg" alt="이미지9"></div>
<div class="slider s5"><img src="assets/img/slideEffect10-min.jpg" alt="이미지10"></div>
</div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:aimee00418@gmail.com">aimee00418@gmail.com</a>
</footer>
<!-- //footer -->🏴🏳🌈
✈01.CSS
<style>
.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 {
/* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
.slider::before {
position: absolute;
left: 5px;
top: 5px;
background-color: 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>🏴🏳🌈
✈03.선택자
<!--선택자 -->
<script>
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider"); //개별이미지
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //이미지 갯수
let sliderWidth = slider[0].clientWidth; //이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사
let sliderInterval = 3000; //이미지 변경 간격 시간🏴🏳🌈
✈04.JAVASCRIPT
//복사한 첫 번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
sliderInner.style.transition = "all 0.6s";
sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex + "px)";
//마지막 이미지에 위치했을 때
if(currentIndex == sliderCount){
setTimeout(()=>{
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translateX(0px)";
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
🏴. appendChild()
메서드는 DOM(Document Object Model)에서 사용되며, 주어진 부모 노드에 새로운 자식 노드를 추가하는데 사용됩니다.
// 부모 요소 선택
const parent = document.getElementById('parent-element');
// 새로운 자식 요소 생성
const child = document.createElement('div');
// 자식 요소에 텍스트 추가
child.textContent = '안녕하세요!';
// 새로운 자식 요소를 부모에 추가
parent.appendChild(child);appendChild() 메서드는 "parent-element" ID를 가진 기존 부모 요소에 새로운 <div> 요소를 추가하는 데 사용됩니다. 새로운 자식 요소는 createElement() 메서드를 사용하여 생성되며, textContent 속성을 사용하여 텍스트 내용이 추가됩니다. 마지막으로, appendChild() 메서드를 사용하여 새로운 자식 요소가 부모에 추가됩니다.
🏴. clientWidth()
clientWidth 속성은 요소의 콘텐츠 영역(content area)의 너비(width)를 픽셀 단위로 반환합니다. 이 속성은 요소의 내부 너비를 계s산하며, 콘텐츠 영역의 크기에는 요소의 패딩(padding)과 수직 스크롤바가 포함됩니다.
const element = document.getElementById('my-element');
const width = element.clientWidth;🏴. cloneNode()
cloneNode() 메서드는 DOM(Document Object Model)에서 사용되며, 주어진 노드를 복제하는데 사용됩니다. 새로운 노드는 복제된 원래 노드와 같은 타입과 속성을 가지지만, 다른 객체입니다.
위 예제에서 cloneNode() 메서드를 사용하여 my-element ID를 가진 원래 노드를 복제합니다. cloneNode() 메서드에 true 인자를 전달하여 복제된 노드의 하위 노드도 함께 복제하도록 지정합니다. 이렇게 복제된 노드는 clonedNode 변수에 할당됩니다.
cloneNode() 메서드에 false 인자를 전달하면, 복제된 노드는 원래 노드와 같은 타입과 속성을 가지지만, 하위 노드를 가지지 않습니다.
🏳🌈
✈05.GSAP
🏴🏳🌈
✈06.jQuery
🏴🏳🌈