jQuery를 이용하는 화려한 슬라이더 효과를 주는 라이브러리들이 많이 있다. 그런것 가져다가 사용하면 편할것 같지만 라이브러리 추가하고 설정을 해줘야 한다. 복잡하고 무겁다. 순수 자바스크립트(바닐라 자바스크립트)와 CSS만으로 간단한 슬라이더 효과를 만들어 보자. 세상.. 심플한것이 제일이다.
------------ index.html --------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript Example</title>
<style type="text/css">
body{
font-size: .8em;
text-align: center;
margin: 0; padding: 0;
}
.slider{
width: 100%;
position: relative;
}
.slider_item{
width: 100%;
height: 500px;
overflow: hidden;
position: absolute;
z-index: 0;
opacity: 0;
transition: all .7s ease-in-out;
transform: scale(.8);
}
img {width: 100%;}
.showing{
opacity: 1;
z-index: 1;
transform: none;
}
</style>
</head>
<body>
<h1>Javascript Example 001 - 자동 슬라이더</h1>
<p>자바스크립트와 CSS만으로 Carousel Slider 효과를 구현해 봅니다. </p>
<!-- Slider -->
<div class="slider">
<!-- items -->
<div class="slider_item"><img src="img/sample01.jpg"></div>
<div class="slider_item"><img src="img/sample02.jpg"></div>
<div class="slider_item"><img src="img/sample03.jpg"></div>
<div class="slider_item"><img src="img/sample04.jpg"></div>
<div class="slider_item"><img src="img/sample05.jpg"></div>
</div>
<script type="text/javascript">
const showing_class = "showing";
const firstSlide = document.querySelector(".slider_item:first-child");
function slide(){
const currentSlide = document.querySelector(`.${showing_class}`); // showing 클래스가 있는 엘리먼트를 찾는다.
if(currentSlide){
// 지금 shwoing 클래스를 가진 엘리먼트 다음 엘리먼트에 클래스를 추가 한다.
currentSlide.classList.remove(showing_class);
const nextSlide = currentSlide.nextElementSibling;
// 다음 엘리먼트가 있는지 없는지 체크 후 처리
if (nextSlide){
console.log(currentSlide);
nextSlide.classList.add(showing_class);
} else {//마지막이면(그다음 형제 엘리먼트가 없으니까) 첫 슬라이드에 추가 함.
firstSlide.classList.add(showing_class);
}
} else { // showing 클래스가 지정된 엘리먼트가 없으면 첫번째에 추가해 준다.(페이지 시작시)
firstSlide.classList.add(showing_class);
}
}
slide();
setInterval(slide, 3000); // 1000은 1초
</script>
</body>
</html>
----------------
데모페이지 : http://visualssing.dothome.co.kr/javascript/js_example001.html
