CSS
.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;
}위의 코드는 이미지 슬라이더를 구현하기 위한 HTML, CSS, JavaScript 코드입니다. HTML 코드는 메인 요소 안에 슬라이더 랩과 슬라이더 이미지 요소가 있으며, 각각 클래스를 가지고 있습니다.
CSS 코드는 슬라이더 이미지 요소를 감싸는 슬라이더 랩과 그 안에 있는 슬라이더 이미지들을 스타일링하는데 사용됩니다. 마지막으로 JavaScript 코드는 슬라이더 이미지를 변경하는 기능을 구현합니다.
슬라이더 이미지를 보여주는 순서를 변경하고, 일정한 시간 간격으로 이미지를 변경합니다.
HTML
<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>이 코드는 HTML 코드입니다. 메인 태그 안에 슬라이더를 담는 div 태그와 이미지를 담는 div 태그, 그리고 이미지를 보여주는 div 태그들이 있습니다.
이미지는 img 태그 안에 src 속성으로 파일 경로를 가리키고 있습니다.
이전 코드와 다른 점은 이미지를 감싸는 div 태그에 slider__inner 클래스가 추가되었다는 점입니다.
JAVASCRIPT
<script>
//선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img"); //보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider"); //개별 이미지
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //전체 이미지 갯수
let sliderInterval = 3000; //이미지 변경되는 시간&간격
</script>
<!-- javscript -->
<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"); //-800 * 3
// sliderInner.style.transform = translateX("-3200px"); //-800 * 4
// sliderInner.style.transform = translateX("-0px"); //-800 * 0
//트렌지션 설정
// sliderInner.style.transition = "all 0.6s"
// setInterval (() => {
// currentIndex = (currentIndex + 1) % sliderCount; //1 2 3 4 0 1 2 3 4 5
// sliderInner.style.transform = "translateY("+ -450 * 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", {
y:-450 * currentIndex,
duration : 1
})
}, sliderInterval);
</script> -->
<!-- jQuery -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
setInterval(() => {
currentIndex = (currentIndex + 1) % $(".slider").length;
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({top: -450 * currentIndex});
}, sliderInterval);
</script> -->이 코드는 이미지 슬라이더를 구현하기 위한 자바스크립트 코드입니다.
코드의 첫 부분에서는 각각의 요소들을 선택하기 위한 선택자를 변수에 할당하고, 현재 보여지는 이미지와 전체 이미지 갯수, 이미지 변경되는 시간 및 간격 등의 변수를 초기화합니다.
그 다음부터는 이미지를 움직이는 것을 구현하는 여러 가지 방법들이 주석처리 되어 있습니다.
첫 번째 방법에서는 translateY() 함수를 사용하여 이미지를 이동시키는 것을 보여주고 있습니다.
두 번째 방법에서는 트랜지션(transition)을 설정하여 이미지 이동 시 부드러운 효과를 줄 수 있습니다.
세 번째 방법에서는 GSAP 라이브러리를 사용하여 이미지 이동 효과를 구현할 수 있습니다.
네 번째 방법에서는 jQuery 라이브러리를 사용하여 animate() 함수를 이용하여 이미지를 이동시키는 것을 보여주고 있습니다.
이 중에서도, 실제로 사용하기에 가장 편리한 방법 중 하나는 jQuery의 animate() 함수를 이용하는 것입니다. 이 함수는 간단하게 애니메이션을 적용할 수 있어 많은 웹 개발자들이 자주 사용하는 방법입니다.
댓글