gwooden_코린이

자바스크립트 캐러셀(carousel) 본문

프론트엔드/자바스크립트

자바스크립트 캐러셀(carousel)

gwooden22 2022. 12. 28. 11:25
728x90

1. 자바스크립트 캐러셀(carousel)

 

- HTML

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="wrapper">
    <div class="carousel">
      <div class="box">
        <img src="https://via.placeholder.com/1200x300">
      </div>
      <div class="box">
        <img src="https://via.placeholder.com/1200x300/000">
      </div>
      <div class="box">
        <img src="https://via.placeholder.com/1200x300/e1f1f1">
      </div>
    </div>
  </div>

  
  <button class="previous">이전</button>
  <button class="btn1">1</button>
  <button class="btn2">2</button>
  <button class="btn3">3</button>
  <button class="next">다음</button>


    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>

 

 

- CSS

* {
  margin: 0;
  padding: 0;
}

.carousel {
  width: 300vw;

  transition: all 1s;
}

.box {
  width: 100vw;
  float: left;
}

.box img {
  width: 100%;

}


.wrapper {
  overflow : hidden;
}

 

 

- JS(제이쿼리)

// let number = 1; // html과 연관된건 없음 단순 숫자

// // next 버튼
// $('.next').on('click', function() {
  
//   if(no === 1) {
//     $('.carousel').css('transform', 'translateX(-100vw)');
//     no++;
//   } else if(no === 2) {
//     $('.carousel').css('transform', 'translateX(-200vw)');
//     no++;
//   }
  

// });



// // 1번 버튼
// $('.btn1').on('click', function() {

//   $('.carousel').css('transform', 'translateX(0)');
//   number = 1;
// });

// // 2번 버튼
// $('.btn2').on('click', function() {

//   $('.carousel').css('transform', 'translateX(-100vw)');
//   number = 2;
// })

// // 3번 버튼
// $('.btn3').on('click', function() {

//   $('.carousel').css('transform', 'translateX(-200vw)');
//   number = 3;
// })





// 리펙토링

let number = 1; // html과 연관된건 없음 단순 숫자
const carousel = $('.carousel');

// next 이전
$('.previous').on('click', function() {

  if( number > 1) {
      carousel.css('transform', `translateX(-${number-2}00vw)`);
      number--;
  }
      console.log(number);
  });


// next 버튼
$('.next').on('click', function() {


  if( number < 3) {
    carousel.css('transform', `translateX(-${number}00vw)`);
    number++;
    console.log(number);
  } 


  //   if(no === 1) {
  //   $('.carousel').css('transform', 'translateX(-' +  number + '00vw)');
  //   no++;
  // } else if(no === 2) {
  //   $('.carousel').css('transform', `translateX(-${number}00vw)`);
  //   no++;
  // }
  

});






// 1번 버튼
$('.btn1').on('click', function() {

  $('.carousel').css('transform', 'translateX(0)');
  number = 1;
});

// 2번 버튼
$('.btn2').on('click', function() {

  $('.carousel').css('transform', 'translateX(-100vw)');
  number = 2;
})

// 3번 버튼
$('.btn3').on('click', function() {

  $('.carousel').css('transform', 'translateX(-200vw)');
  number = 3;
})

See the Pen Untitled by gwooden22 (@gwooden22) on CodePen.

728x90
저작자표시 비영리 변경금지

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

자바스크립트 스크롤 이벤트 (약관동의 체크박스 및 상태바 만들기)  (0) 2022.12.29
자바스크립트 카운트 다운 알림창 만들기  (0) 2022.12.28
자바스크립트 DATASET  (1) 2022.12.28
자바스크립트 이용한 다크모드 만들어보기  (0) 2022.12.27
자바스크립트 부트스트랩을 이용한 메뉴만들기  (0) 2022.12.27
'프론트엔드/자바스크립트' Related Articles more
Comments