자바스크립트로 간단한 이미지 슬라이드 만들기

  <div style="overflow: hidden"> // 넘치는 요소들을 숨겨줌. 
      <div class="slide-container">
        <div class="slide-box">
          <img src="img/1.jpg" />
        </div>
        <div class="slide-box">
          <img src="img/2.jpg" />
        </div>
        <div class="slide-box">
          <img src="img/3.jpg" />
        </div>
      </div>
    </div>

    <button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>

.slide-container {
  width: 300vw; // 브라우저 크기(100vw)의 3배 크기의 div 박스를 만들어줌.
  transition: all 1s;
}
.slide-box {
  width: 100vw;
  float: left; // 이미지를 왼쪽으로 배치.
}
.slide-box img {
  width: 100%; // 이미지가 크기 때문에 따로 폭 값을 줌. slide-box의 크기가 100vw인데 100vw의 100%이니까 이미지를 브라우저에 꽉차게 만들어줌. 
  height: 700px; // 본인 이미지에 따라 크기를 조절해주면 될 듯.
}

$(".slide-2").on("click", function () {
  $(".slide-container").css("transform", "translateX(-100vw)");
}); // slide-2번 버튼을 클릭했을 때, slide-container의 css transform의 translateX(-100vw)를 적용해줘라.
$(".slide-1").on("click", function () {
  $(".slide-container").css("transform", "translateX(0vw)");
});
$(".slide-3").on("click", function () {
  $(".slide-container").css("transform", "translateX(-200vw)");
}); // 제이쿼리 사용하였음. 

무료 고화질 이미지 링크

-https://unsplash.com/ko
-https://www.pexels.com/ko-kr/

사용 프로그램

-visual studio(VSC)

**중요한건 막혔을때 구글링 해보는 습관과 복습!

출처. 코딩애플