- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
완성된 화면 입니다.
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">
<meta name="view-transition" content="same-origin">
<title>04. 슬라이드 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.css">
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
</head>
<body class="img06 bg06 font10">
<header id="header">
<h1>Javascript slider Effect04</h1>
<p>슬라이드 이펙트 - 좌로 움직이기(연속적으로)</p>
<ul>
<li><a href="sliderEffect01.html">1</a></li>
<li><a href="sliderEffect02.html">2</a></li>
<li><a href="sliderEffect03.html">3</a></li>
<li class="active"><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 s1"><img src="./img/sliderEffect06-1-min.jpg" alt="이미지1"></div>
<div class="slider s2"><img src="./img/sliderEffect07-1-min.jpg" alt="이미지2"></div>
<div class="slider s3"><img src="./img/sliderEffect08-1-min.jpg" alt="이미지3"></div>
<div class="slider s4"><img src="./img/sliderEffect09-min.jpg" alt="이미지4"></div>
<div class="slider s5"><img src="./img/sliderEffect10-1-min.jpg" alt="이미지5"></div>
</div>
</div>
</div>
</main>
</body>css 코드입니다.
/* silder_wrap */
.slider_wrap {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.slider_img { /* 이미지가 보이는 영역 */
position: relative;
width: 800px;
height: 520px;
overflow: hidden;
}
.slider_inner { /* 전체 이미지를 감싸고 있는 부모박스 : 움직이는 영역 */
display: flex;
flex-wrap: wrap;
width: 4800px;
height: 520px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 520px;
}
JS코드입니다.
<!-- 자바스크립트 -->
<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; //이미지 변경되는 간격 시간
let sliderWidth = slider[0].offsetWidth; //이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번쨰 이미지 복사
//복사한 첫 번쨰 이미지 마지막에 붙여넣기
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);
</script>
<!-- 제이쿼리 -->
<script>
선택자
const sliderWrap = $(".slider_wrap");
const sliderImg = $(".slider_img");
const sliderInner = $(".slider_inner");
const slider = $(".slider");
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //전체 이미지 갯수
let sliderInterval = 3000; //이미지 변경되는 간격 시간
let sliderWidth = slider.eq(0).outerWidth(); //이미지 가로값
let sliderClone = sliderInner.find(".slider:first-child").clone(); //첫번쨰 이미지 복사
//복사한 첫 번쨰 이미지 마지막에 붙여넣기
sliderInner.append(sliderClone);
function sliderEffect(){
currentIndex++;
sliderInner.css("transition", "all 0.6s");
sliderInner.css("transform", `translateX(-${sliderWidth * currentIndex}px)`);
//마지막 이미지에 위치 했을때
if(currentIndex == sliderCount){
setTimeout(()=>{
sliderInner.css("transition", "0s");
sliderInner.css("transform", `translateX(0px)`);
},700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>
<!-- GSAP -->
<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 = 3; //이미지 변경되는 간격 시간
let sliderWidth = slider[0].offsetWidth; //이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번쨰 이미지 복사
//복사한 첫 번쨰 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
if(currentIndex == sliderCount){
currentIndex = 0;
}
gsap.to(sliderInner, {
x: -sliderWidth * currentIndex,
duration: 0.6,
ease: "power2.out",
onComplete: function() {
if(currentIndex == 0) {
gsap.set(sliderInner, {x: 0});
}
}
});
}
setInterval(sliderEffect, sliderInterval * 1000);
</script>
자바스크립트
- 이번에는 이미지를 가로로 연속적으로 움직이는 슬라이드 입니다.
- 먼저 css에서 display:flex를 주고 width값을 설정했습니다. (총그림의 크기는 4800px입니다.)
- 그리고 나머지 영역을 overflow:hidden 으로 감추게 했습니다.
- 그리고 let 변수를 설정 전에와 같이 설정을 했습니다.
- 이번에는 변수에 이미지 가로값을 설정하는 sliderWidth 와 이미지를 복사해서 붙여 넣는 silderClone 을 만들었습니다.
- 그리고 복사한 첫번째 이미지를 마지막에 붙여넣기위해서 appendchild를 이용해서 작업을 했습니다.
- 그리고 슬라이더 효과 함수를 만들었습니다. sliderEffect 함수 입니다.
- 일단 함수안에 currentCount 값을 증가 시켜줍니다. 그리고 slider_inner에 스타일을 줍니다.
- transition을 주는 이유는 부드럽게 넘어가는 효과를 위해 주었고 tansform을 이용해서 사진을 넘길것 입니다.
- transform에 translateX값을 -(마이너스)로 주면 왼쪽으로 움직이게 될것입니다. 그래서 슬라이더의 크기 곱하기 currentIndex값을 곱해지면 계속 움직일 것입니다.
- 그리고 만약 currentIndex 값과 slidercount 값이 같으면 다시 trasition을 0 그리고 translateX를 0으로 만듭니다.
- 그리고 setInterval을 이용해서 반복을 돌려줍니다.
GASP
- gsap는 tnasfrom에 translateX를 더 쉽게 변경해서 쓸수 있습니다.
- 다른건 자바스크립트랑 거희 동일하나 style 주는데만 다릅니다.
- tanslateX 를 x만 쓰고 입력하면 적용이 됩니다.
제이쿼리
- 제이쿼리는 지금은 잘 쓰이지 않고 있는데 그래도 현직에는 많이 남아있어서 쓰임새를 알려고 작성했습니다.
- 자바스크립트 처럼 변수를 설정했습니다.
- 제이쿼리는 style을 안쓰고 css를 쓰면 스타일변경이 가능합니다.
- 그걸 이용해서 transiton 및 transform을 입력해 주면 됩니다.
- 그다음은 자바스크립트과 같습니다.