[HTML, CSS, JavaScript]carousel 구현하기

1. HTML 코드

<section id="image" class="carouselContainer" style="height: 1440px; width: 1080px;">
                <div class="carousel">
  
                </div>
 </section>

 

 

2. CSS 코드

.carouselContainer {
    width: 1080px;
    height: 1440px;
    overflow-x: hidden; 
    overflow-y: hidden;
    margin: auto;
  }
  
  .carouselContainer > .carousel {
    display: flex; 
    transform: translate3d(0, 0, 0); 
    transition: transform 0.2s;
 
  }
  
  .carousel_item {
    width: 1080px;
    height: 1440px;
  }
  
  .carousel_item > img {
    width: 1080px;
    height: 1440px;
    object-fit: contain; 
  }

 

 

3. JavaScript 코드

/**이미지 다음으로 넘기기 */
function goNextImg(img){
    if(now < imgList.length - 1){
        now = now + 1;
    }else{
        now = imgList.length - 1
    }
    carousel.style.transform = `translate3d(-${
        1080 * now
    }px, 0, 0)`;
   }
   
   /**이미지 이전으로 넘기기 */
   function goPreImg(img){
    if(now > 0){
        now = now - 1;
       carousel.style.transform = `translate3d(-${
           1080 * now
         }px, 0, 0)`;
   }}