Posis

[jQuery] 이미지 슬라이드 만들기 본문

jQuery

[jQuery] 이미지 슬라이드 만들기

CooNiHong 2021. 10. 19. 03:59

이번 포스팅에서는 라이브러리 없이 JavaScript 코드만을 사용해서 이미지 슬라이드를 구현해 보겠습니다. 구현하는 방법은 무수히 많기 때문에 이 사람은 이런 식으로 구현했구나라고 참고하시면 될 것 같습니다.

HTML

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./main.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
  <div class="slide">
    <div class="slide-container">
      <div class="slide-box"></div>
      <div class="slide-box"></div>
      <div class="slide-box"></div>
    </div>
    <button class="slide-next">Next</button>
    <button class="slide-prev">Prev</button>
  </div>
</div>
</body>
</html>

Bootstrap에 container만 이용했습니다.

CSS

.slide {
  overflow: hidden;
  position: relative;
}
.slide-container {
  width: 300vw;
  height: 400px;
  display: flex;
  transition: all 0.8s;
}
.slide-box {
  width: 100vw;
}
.slide-box:nth-of-type(1) {
  background: center/cover no-repeat url("./images/scenery1.jpg");
}
.slide-box:nth-of-type(2) {
  background: center/cover no-repeat url("./images/scenery2.jpg");
}
.slide-box:nth-of-type(3) {
  background: center/cover no-repeat url("./images/scenery3.jpg");
}
.slide-next {
  position: absolute;
  top: 45%;
  right: 0;
}
.slide-prev {
  position: absolute;
  top: 45%;
  left: 0;
}

JS(jQuery)

저의 코드를 펼쳐보시기 전에 한번 구현해 보시고 비교해보는 것을 추천드립니다.

더보기 
$('.slide-next').click(function () {
  if (photo < 3) {
    $('.slide-container').css({ transform: `translateX(-${ photo }00vw)` });
    photo += 1;
  } else {
    $('.slide-container').css({ transform: `translateX(0)` });
    photo = 1;
  }
});
$('.slide-prev').click(function () {
  if (photo > 1) {
    $('.slide-container').css({ transform: `translateX(-${ photo - 2 }00vw)` });
    photo -= 1;
  } else {
    $('.slide-container').css({ transform: `translateX(-200vw)` });
    photo = 3;
  }
});

현재 표시되고있는 사진의 순서를 변수에 저장한 후에 그걸 바탕으로 css style을 수정하였습니다.

완성된 화면

라이브러리를 이용해서 간단하게 만들 수 있도록 많은 개발자들이 좋은 기능을 만들어놨지만 이렇게 간단하게라도 한 번씩 직접 구현해보는 것이 JavaScript의 기초를 쌓는데 많은 도움이 된다고 생각합니다.

잘못된 부분이 있거나 피드백할 사항이 있다면 댓글 부탁드립니다!! 구독도 클릭한번 부탁드립니다!!

다음에는 라이브러리를 이용해서 이미지 슬라이드를 만드는 방법에 대해서 포스팅하겠습니다. 긴 글 봐주셔서 감사합니다.

JavaScript 버전 이미지 슬라이드

728x90