html 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01. 슬라이드 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.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__inner { /* 이미지 움직이는 영역 */
display: flex;
flex-wrap: wrap;
width: 4000px;
height: 450px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>
</head>
<body class="img01 bg01 font01">
<header id="header">
<h1>Javascript Slider Effect01</h1>
<p>슬라이드 이펙트 : 좌로 움직이기</p>
<ul>
<li><a href="sliderEffect01.html">1</a></li>
<li class="active"><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>
</ul>
</header>
<!-- //header -->
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider"><img src="./img/sliderEffect06-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect07-min.jpg" alt="이미지2"></div>
<div class="slider"><img src="./img/sliderEffect08-min.jpg" alt="이미지3"></div>
<div class="slider"><img src="./img/sliderEffect09-min.jpg" alt="이미지4"></div>
<div class="slider"><img src="./img/sliderEffect10-min.jpg" alt="이미지5"></div>
</div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:ebmdols@naver.com">ebmdols@naver.com</a>
</footer>
<!-- //footer -->
</body>
</html>구성은 저번 시간과 같습니다. 이미지만 다른 이미지를 사용하기 위해 바꾸어 주었습니다.
.slider__wrap 클래스는 슬라이더 전체를 감싸는 영역을 설정합니다. 이 영역은 화면 전체를 차지하며, 내부의 요소들을 수직 가운데 정렬합니다.
.slider__img 클래스는 이미지가 보이는 영역을 설정합니다. 이 영역은 이미지를 보여주는 화면의 크기를 정의하며, overflow 속성을 통해 이미지 영역을 벗어나는 부분은 잘리도록 설정합니다.
.slider__inner 클래스는 이미지가 움직이는 영역을 설정합니다. 이 영역은 display: flex 속성을 통해 내부의 요소들을 행으로 배치합니다. flex-wrap: wrap 속성을 사용하여 요소들이 넘치는 경우 여러 행으로 나누어 표시합니다.
.slider 클래스는 개별적인 이미지를 설정합니다. 이 영역은 각 이미지의 크기를 정의하며, position: relative 속성을 사용하여 내부 요소들의 위치를 상대적으로 설정합니다.
스크립트코드 입니다.
<script>
// sliderInner.style.transform = translateX("-0px");
// sliderInner.style.transform = translateX("-800px");
// sliderInner.style.transform = translateX("-1600px");
// sliderInner.style.transform = translateX("-2400px");
// sliderInner.style.transform = translateX("-3200px");
// sliderInner.style.transform = translateX("-0px");
// sliderInner.style.transition = "all 0.6s"
// setInterval (() => {
// currentIndex = (currentIndex + 1) % sliderCount; //1 2 3 4 0 1 2 3 4 5
// sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";
// }, sliderInterval);
</script>
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<!-- <script>
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount;
gsap.to(".slider__inner", {
x : -800 * currentIndex,
duration : 1,
ease : "elastic.out(1, 0.3)"
})
}, sliderInterval);
</script> -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
setInterval(() => {
currentIndex = (currentIndex + 1) % $(".slider").length;
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({left : -800 * currentIndex}, 600, "easeOutElastic");
}, sliderInterval);
</script>첫 번째로 주석 처리된 코드는 순환되는 이미지나 콘텐츠를 표시하는 슬라이더를 만들기 위해 원래 사용되었던 코드입니다. sliderInterval은 이미지가 전환되는 간격을 나타냅니다. 슬라이더 내부의 이미지를 이동시키기 위해 translateX() CSS 속성을 사용합니다.
두 번째 코드는 GSAP 라이브러리를 사용하여 슬라이더를 구현한 것입니다. GSAP는 애니메이션 효과를 구현하는 JavaScript 라이브러리 중 하나입니다. x 속성은 이미지가 이동하는 거리를, duration은 애니메이션 지속 시간을 나타냅니다. ease 속성은 애니메이션의 이질감을 조절합니다.
세 번째 코드는 jQuery와 jQuery UI 라이브러리를 사용하여 구현된 슬라이더입니다. animate() 함수는 이미지를 이동시키는 데 사용됩니다. 이 함수는 CSS 속성을 사용하여 애니메이션을 만들기 때문에 left 속성을 사용하여 이미지를 이동시킵니다. easeOutElastic 함수는 애니메이션을 부드럽게 전환하기 위해 사용됩니다.