Slider Effect 만들기2
Slider Effect1 페이지와 다르게 2페이지에서는 다음 프레임과 같이 옆으로 슬라이드 됩니다. 또한 효과를 주어 보다더 부드러움 넘김을 보여주도록 만들어 보겠습니다.
코드블럭
<!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>마우스이펙트</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="img06 bg06 font02">
<header id="header">
<h1>Javascript Slider Effect02</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:lee3ll@naver.com">lee3ll@naver.com</a>
</footer>
<!--footer -->
<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 sliderInterval = 3000; //이미지 변경 간격시간(3초)
</script>
<!-- <script>
sliderInner.style.transform = translateX("0px"); //-800*0
sliderInner.style.transform = translateX("-800px"); //-800*1
sliderInner.style.transform = translateX("-1600px"); //-800*2
sliderInner.style.transform = translateX("-2400px");
sliderInner.style.transform = translateX("-3200px");
sliderInner.style.transform = translateX("-0px");
javascript
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>
</body>
</html>보충설명
✨ 선택자를 사용하여 변수에 요소를 할당해 줍니다.
✨ sliderInner라는 변수를 사용하여 HTML 문서 내에서 이미지 슬라이드쇼의 이미지를 감싸고 있는 요소를 찾아 할당합니다. 그리고, transition 속성을 이용하여 이미지 전환 시간을 0.6초로 설정합니다.
✨ slidereffect1과 같이 setInterval 함수를 사용하여 일정한 시간 간격으로 이미지를 전환하는 반복 작업을 수행합니다.
✨ 다음으로, transform 속성을 이용하여 이미지를 이동시킵니다. translateX() 함수를 사용하여 X축 방향으로 이미지를 이동시키며, -800 * currentIndex를 입력하여 이미지의 이동 거리를 계산합니다. 이때, -800은 이미지의 가로 크기를 의미합니다. 즉, currentIndex가 0일 경우 0px만큼, 1일 경우 -800px만큼, 2일 경우 -1600px만큼, ... 이동하는 것입니다.
✨ 따라서, 해당 코드는 이미지 슬라이드쇼를 구현하기 위해 이미지의 이동 거리를 계산하고, 이동 효과를 부드럽게 적용하기 위해 transition 속성을 설정하는 기능을 수행합니다.
jQuery
✨ 이 코드는 jQuery 라이브러리를 사용하여 이미지 슬라이더를 구현하는 코드입니다.
✨ setInterval() 함수를 사용하여 일정한 시간 간격으로 이미지를 변경하도록 합니다. 현재 보여지는 이미지의 인덱스를 currentIndex 변수에 저장하고, sliderInterval 변수에 지정된 시간(3초) 마다 이미지를 변경합니다.
✨ 이미지를 변경하기 위해서는 currentIndex 값을 업데이트하고, 이를 이용하여 .slider__inner 요소의 left 값을 변경해야 합니다. jQuery를 이용하면 $(".slider")와 같이 CSS 선택자를 사용하여 요소를 선택할 수 있습니다. 그리고 선택한 요소에 .length를 사용하여 선택된 요소의 개수를 구할 수 있습니다.
✨ .slider__inner 요소의 left 값을 변경하기 위해 .css() 함수를 사용하여 position: relative 속성을 적용합니다. 이후, .animate() 함수를 사용하여 애니메이션 효과를 부여합니다. left 속성을 이용하여 currentIndex 값을 기반으로 이동할 위치를 계산하고, 이동 시간을 600밀리초로 지정하며, 이동 속도를 "easeOutElastic"로 설정합니다. 이로써 이미지가 부드럽게 이동하면서 변경되는 효과를 구현할 수 있습니다.
jQuery 홈페이지: https://jqueryui.com/easing/