먼저 이미지 4개를 준비합니다. 사이즈는 비슷한게 좋아요.
저는 1280x485px로 작업하였어요.
슬라이드 구현되는 방법을 서술하자면,
prev, next 버튼을 누르면 4개의 이미지가 하나씩 X좌표 이동하는 거예요.
그리고 첫 이미지 때는 이전 이미지가 없기 때문에 prev 버튼이 비활성화 되고
마지막 이미지 때는 이후 이미지가 없기 때문에 next 버튼이 비활성화 됩니다.
추가로 css images 태그에 transition: transform 0.5s; 추가하여
좌우 이미지 슬라이드에 자연스러운 애니메이션 효과를 주었습니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>slider</title>
</head>
<body>
<div class="container">
<h1>SLIDER</h1>
<div class="album">
<div class="images">
<img src="images/img-1.jpg" alt="">
<img src="images/img-2.jpg" alt="">
<img src="images/img-3.jpg" alt="">
<img src="images/img-4.jpg" alt="">
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
.container{width:1280px;margin: 0 auto;}
h1{text-align: center;}
.album{width: 1280px;height: 485px;overflow: hidden;}
.images{position: relative;display: flex;height: 485px; transition: transform 0.5s;}
img{width: 1280px;height: 485px;}
button, button:active, button:focus{width: 100px; height: 30px; border: none;color: white; background-color: teal; outline: none;}
button:hover{background-color: turquoise;}
button:disabled{background-color: gray;}
.prev{float: left;}
.next{float: right;}JS
let curPos = 0; // 현재 보여주는 이미지의 인덱스 번호
let positionValue = 0; // 이미지 태그의 위치 값 지정할 변수
const IMAGE_WIDTH = 1280;
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
const images = document.querySelector(".images");
// 다음 이미지로 이동하는 함수
function next(){
// 현재 이미지가 마지막 이미지가 아닌 경우에만 이동 가능
if(curPos < 3){
prevBtn.removeAttribute('disabled'); // 이전 버튼 활성화
positionValue -= IMAGE_WIDTH; // 다음 이미지 위치로 이동
images.style.transform = `translateX(${positionValue}px)`; // 이미지 이동 애니메이션
curPos += 1; // 현재 이미지 인덱스 증가
}
if(curPos === 3){
nextBtn.setAttribute('disabled','true');
}
}
// 이전 이미지로 이동하는 함수
function prev(){
if(curPos > 0){
nextBtn.removeAttribute('disabled'); // 다음 버튼 활성화
positionValue += IMAGE_WIDTH; // 이전 이미지 위치로 이동
images.style.transform = `translateX(${positionValue}px)`; // 이미지 이동 애니메이션
curPos -= 1; // 현재 이미지 인덱스 감소
}
if(curPos === 0){
prevBtn.setAttribute('disabled','true');
}
}
function init(){
prevBtn.setAttribute('disabled','true'); // 페이지 로드 시 이전 버튼 비활성화
prevBtn.addEventListener("click", prev); // 이전 버튼에 클릭 이벤트 추가
nextBtn.addEventListener("click", next); // 다음 버튼에 클릭 이벤트 추가
}
init(); // 초기화 함수 호출
반응형
'프로그램 > vscode' 카테고리의 다른 글
| float의 margin, 웹폰트 넣기, 폰트 안티앨리어싱 (0) | 2024.04.16 |
|---|---|
| [자바스크립트] DOM (Document Object Model) (0) | 2024.04.05 |
| 반응형 웹 - 반응형의 단위, 가변이미지와 가변동영상 (1) | 2024.04.02 |
| float로 범람하게 된 요소에 대해 작업하는 방법 (0) | 2024.02.02 |
| 오늘 하루 보지 않기 배너 html js (0) | 2024.01.03 |