이미지 슬라이드 만들기
위와 같이 동그라미 버튼을 누르면 다른 이미지가 변하는 슬라이드를 만들어 보려고 한다
사용할 이미지를 폴더 안에 넣어주고
body 태그 안에 이미지를 담아줄 큰그룹 (slide-container) 태그를 만들어주고
그 안에 이미지 태그를 3개를 들어서 넣어주었다
<div class="slide-container">
<div class="slide-card-bg"><img src="IMG/img1.jpg" /></div>
<div class="slide-card-bg"><img src="IMG/img2.jpg" /></div>
<div class="slide-card-bg"><img src="IMG/img3.jpg" /></div>
</div>
슬라이드를 만들어주기 위해서
세로로 정렬된 이미지를 가로로 정렬 시켜주어야한다
그러기 위해서 CSS 파일을 하나 만들어준다
.slide-container {
width: 300vw;
}
.slide-card-bg {
float: left;
width: 100vw;
}반응형 웹에서 사용되어지는 크기의 단위 중 하나가 vw(Viewport Width), 그리고 vh (Viewport Height)가 있다
가로 사이즈에 대응하여 변화하는 크기이고, vh는 세로 사이즈의 변화에 따른 크기다.
vw/px 계산하는 사이트: http://publishing.kr/vw/
현재 브라우저 창의 크기에 따라서 1vw의 사이즈의 px의 값이 달라진다
현재 창 크기가 가로 폭이 1000px 이라고 가정 했을 때, 1vw는 10px의 사이즈를 의미한다
이미지 3개가 나열되게 보여주기 위해서
전체 div 박스의 width 를 300vw 로 작성해주고
이미지의 사이즈를 100vw 로 해주었다
float :left 속성을 사용해서 이미지를 왼쪽 정렬까지 해주고 나면
이미지 3개가 나란히 배치된다
버튼을 눌렸을때, 원하는 이미지를 보여주기 위해서
이미지의 종류에 따라서 버튼을 3개 만들어주고
slide-container 안에 overflow-hidden을 적용해서
하단의 스크롤 바를 안보이게 할 수있다
<div style="ovwerflow-hidden">
<div class="slide-container">
<div class="slide-card-bg"><img src="IMG/img1.jpg" /></div>
<div class="slide-card-bg"><img src="IMG/img2.webp" /></div>
<div class="slide-card-bg"><img src="IMG/img3.jpg" /></div>
</div> <div class="btn-container">
<button class="1-button">1</button>
<button class="2-button">2</button>
<button class='3-button'>3</button>
</div>
이제 버튼을 누르면 이미지의 전환 하는 애니메이션을 넣어줘야 한다
2번 버튼을 눌렀을 때, 현재 이미지가 1번 이미지일 경우,
<div class="slide-container"> 태그가 X축으로 이동하는 애니메이션을 넣어주면된다.
<script>
$(".1-button").on("click", function () {
$(".slide-container").css("transform", "translateX(0vw)");
});
$(".2-button").on("click", function () {
$(".slide-container").css("transform", "translateX(-100vw)");
});
$(".3-button").on("click", function () {
$(".slide-container").css("transform", "translateX(-200vw)");
});
</script>.slide-container {
width: 300vw;
transition: all 1s;
transform: translateX(0vw);
}기본 위치값을 0으로 잡고 버튼 클릭에 따라서
container 박스를 이동시키는 애니메이션을 넣어준다
전체 코드
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Javascript Study</title>
<link href="css.css" rel="stylesheet" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"
></script>
</head>
<body>
<div style="overflow: hidden">
<div class="slide-container">
<div class="slide-card-bg"><img src="IMG/img1.jpg" /></div>
<div class="slide-card-bg"><img src="IMG/img2.webp" /></div>
<div class="slide-card-bg"><img src="IMG/img3.jpg" /></div>
</div>
</div>
<div class="btn-container">
<button class="1-button">1</button>
<button class="2-button">2</button>
<button class="3-button">3</button>
</div>
<script>
$(".1-button").on("click", function () {
$(".slide-container").css("transform", "translateX(0vw)");
});
$(".2-button").on("click", function () {
$(".slide-container").css("transform", "translateX(-100vw)");
});
$(".3-button").on("click", function () {
$(".slide-container").css("transform", "translateX(-200vw)");
});
</script>
</body>
</html>CSS
.slide-container {
width: 300vw;
transition: all 1s;
transform: translateX(0vw);
}
.slide-card-bg {
width: 100vw;
float: left;
}
.slide-card-bg img {
width: 100%;
}
.btn-container {
text-align: center;
margin: 10px;
}