반응형
자바스크립트로 자연스러운 슬라이드 만들기
준비물
1. 300*300px 이미지 6장 (아래 파일에 첨부함, 연습하실때 필요하신분들 쓰세요~)
2. visual studio or 다른 개발자 도구
결과물
* 잘 안되시는 분들을 위해 자바스크립트 주석을 달아놓았어요!
* 주의할 점은, CSS 파일 경로와 JavaScript 파일 경로, html에서 연결하실때 주의해주세요
* 잘 안되시는 분들은 댓글에 질문 주시면 됩니다!! 제가 아는 한에서 다 알려드릴게요 :)
HTML코드
index.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">
<title>슬라이드</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<div id="slideShow">
<ul class="slides">
<li><img src="image/flower.jpg" alt=""></li>
<li><img src="image/fox.jpg" alt=""></li>
<li><img src="image/lightning.jpg" alt=""></li>
<li><img src="image/moon.jpg" alt=""></li>
<li><img src="image/nature.jpg" alt=""></li>
<li><img src="image/space.jpg" alt=""></li>
</ul>
<p class="controller">
<!-- &lang: 왼쪽 방향 화살표
&rang: 오른쪽 방향 화살표 -->
<span class="prev">⟨</span>
<span class="next">⟩</span>
</p>
</div>
<script src="JS/slideShow.js"></script>
</body>
</html>
CSS코드
CSS/style.css
/* 초기화 */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style-type: none;
}
/* 보여줄 구간의 높이와 넓이 설정 */
#slideShow{
width: 500px;
height: 300px;
position: relative;
margin: 50px auto;
overflow: hidden;
/*리스트 형식으로 이미지를 일렬로
정렬할 것이기 때문에, 500px 밖으로 튀어 나간 이미지들은
hidden으로 숨겨줘야됨*/
}
.slides{
position: absolute;
left: 0;
top: 0;
width: 2500px; /* 슬라이드할 사진과 마진 총 넓이 */
transition: left 0.5s ease-out;
/*ease-out: 처음에는 느렸다가 점점 빨라짐*/
}
/* 첫 번째 슬라이드 가운데에 정렬하기위해
첫번째 슬라이드만 margin-left조정 */
.slides li:first-child{
margin-left: 100px;
}
/* 슬라이드들 옆으로 정렬 */
.slides li:not(:last-child){
float: left;
margin-right: 100px;
}
.slides li{
float: left;
}
.controller span{
position:absolute;
background-color: transparent;
color: black;
text-align: center;
border-radius: 50%;
padding: 10px 20px;
top: 50%;
font-size: 1.3em;
cursor: pointer;
}
/* 이전, 다음 화살표에 마우스 커서가 올라가 있을때 */
.controller span:hover{
background-color: rgba(128, 128, 128, 0.11);
}
.prev{
left: 10px;
}
/* 이전 화살표에 마우스 커서가 올라가 있을때
이전 화살표가 살짝 왼쪽으로 이동하는 효과*/
.prev:hover{
transform: translateX(-10px);
}
.next{
right: 10px;
}
/* 다음 화살표에 마우스 커서가 올라가 있을때
이전 화살표가 살짝 오른쪽으로 이동하는 효과*/
.next:hover{
transform: translateX(10px);
}
JavaScript 코드
JS/slideShow.js
const slides = document.querySelector('.slides'); //전체 슬라이드 컨테이너
const slideImg = document.querySelectorAll('.slides li'); //모든 슬라이드들
let currentIdx = 0; //현재 슬라이드 index
const slideCount = slideImg.length; // 슬라이드 개수
const prev = document.querySelector('.prev'); //이전 버튼
const next = document.querySelector('.next'); //다음 버튼
const slideWidth = 300; //한개의 슬라이드 넓이
const slideMargin = 100; //슬라이드간의 margin 값
//전체 슬라이드 컨테이너 넓이 설정
slides.style.width = (slideWidth + slideMargin) * slideCount + 'px';
function moveSlide(num) {
slides.style.left = -num * 400 + 'px';
currentIdx = num;
}
prev.addEventListener('click', function () {
/*첫 번째 슬라이드로 표시 됐을때는
이전 버튼 눌러도 아무런 반응 없게 하기 위해
currentIdx !==0일때만 moveSlide 함수 불러옴 */
if (currentIdx !== 0) moveSlide(currentIdx - 1);
});
next.addEventListener('click', function () {
/* 마지막 슬라이드로 표시 됐을때는
다음 버튼 눌러도 아무런 반응 없게 하기 위해
currentIdx !==slideCount - 1 일때만
moveSlide 함수 불러옴 */
if (currentIdx !== slideCount - 1) {
moveSlide(currentIdx + 1);
}
});
관련 링크
<무한 슬라이드 만들기>
2021.08.04 - [웹/HTML-CSS-자바스크립트] - (웹) 자바스크립트로 무한 슬라이드 만들기 (매우간단/ 상세 설명)
(웹) 자바스크립트로 무한 슬라이드 만들기 (매우간단/ 상세 설명)
무한 슬라이드 만들기 포스팅 요약 1. 결과 영상 2. 코드 3. 동작 원리 4. 깃허브 코드 5. 참고 링크 (일반 슬라이드, 3d슬라이드) 결과영상 코드 슬라이드 ⟨ ⟩ let slides = document...
eunhee-programming.tistory.com
도움되셨다면 아래 하트 꾹 눌러주세요 :)
반응형
'웹 > HTML-CSS-자바스크립트' 카테고리의 다른 글
| scss에서 미디어 쿼리 다루기/ scss 미디어 쿼리 깔끔하게 사용하기 (1) | 2021.08.15 |
|---|---|
| [2021.08]자바스크립트에 미디어쿼리 사용하기+자동 새로고침 (2) | 2021.08.09 |
| (웹) 자바스크립트로 무한 슬라이드 만들기 (매우간단/ 상세 설명) (40) | 2021.08.04 |
| (웹) 회전형 슬라이드/3D 슬라이드 만들기: swiper 사용법 (상세설명) (0) | 2021.07.19 |
| (웹)자바스크립트 - 실시간 시계 (초간단) (0) | 2021.05.08 |
댓글