The element doesn’t scroll vertically on mobile.

I followed a JS code reference to create a slider component for practice.

The slider works but can’t be scrolled when viewed on mobile.

I would like to know why it doesn’t scroll vertically.

The slider works when you drag it from side to side. But, when I touch the slider section of the website, the page freezes and doesn’t scroll vertically anymore.

<div class="wrapper">
    <i id="left" class="fa-solid fa-angle-left"></i>
    <div class="carousel">

      <div class="card card-content">
        <p id="content-s-heading">title</p>
        <h1 id="content-b-heading">content</h1>
        <p id="slide_content">sentence<br> sentence</p>
        <button><a href="#">see more</p></a></button>
      </div>
      <div class="card card_prd">
        <a href="#">
          <img src="slider_prd_combo_1.jpg" alt="img" draggable="false">
          <h1 id="slider_prd_title">combo title</h1>
          <p id="slider_prd_price">price 5%</p>
        </a>
      </div>
      <div class="card card_prd">
        <a href="#">
          <img src="선물세트1.jpg" alt="img" draggable="false">
          <h1 id="slider_prd_title">combo title</h1>
          <p id="slider_prd_price">price 5%</p



        </a>
      </div>
      <div class="card card_prd">
        <a href="#">
          <img src="선물세트2.jpg" alt="img" draggable="false">
          <h1 id="slider_prd_title">combo title</h1>
          <p id="slider_prd_price">price 5%</p>
        </a>
      </div>
        
        
        
    </div>
    <i id="right" class="fa-solid fa-angle-right"></i>
  </div>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  margin: 0 auto;
}

.wrapper{
  display: flex;
  max-width: 1500px;
  position: relative;
  margin: 0 auto;
}
.wrapper i{
    top: 50%;
    width: 80px;
    height: 80px;
    cursor: pointer;
    position: absolute;
    font-size: 1.2rem;
    text-align: center;
    line-height: 80px;
    background: #000;
    color: #fff;
    transform: translateY(-50%);
    transition: 0.5s ease-in-out;
    
    opacity: 0;
}
.wrapper i:active{
  transform: translateY(-50%) scale(0.9);
}
.wrapper:hover i{
  opacity: 1;
}
.wrapper i:first-child{
  left: -80px; /* needs position: absolute */
  display: none; /* hide button */
}
.wrapper i:last-child{
  right: -80px; /* needs position: absolute */
}
.wrapper .carousel{
  font-size: 0px;
  cursor: pointer;
  white-space: nowrap;
  scroll-behavior: smooth;

  display: flex;
  overflow-x: auto;
  margin-bottom: 48px;
  padding: 0 0 48px;
}


.carousel::-webkit-scrollbar{
  height: 3px;
}
.carousel::-webkit-scrollbar-thumb{
  background: #000;
  border-radius: 10px;
}
.carousel::-webkit-scrollbar-track{
  background-color: rgba(0, 0, 0, .2);
}

.card-content {
  padding: 60px 185px 60px 0;
}
.card-content #content-s-heading {
  margin-bottom: 5px;
  font-size: 14px;
}
.card-content #content-b-heading {
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 400;
}
.card-content #slide_content {
  font-size: 14px;
  margin: 30px 0;
}
.card-content button{
  border: none;
  background-color: #fff;
}
.card-content button:hover a{
  text-decoration: underline;
}
.card-content button a{
  text-decoration-line: none;
  color: #000;
  font-size: 15px;
}



.card a{
  text-decoration: none;
  text-align: center;
  font-size: 0;
}
.card #slider_prd_title {
  font-size: 20px;
  color: #000;
  margin: 10px 0;
}
.card #slider_prd_price{
  font-size: 16px;
  color: #000;
}





.carousel.dragging{
  cursor: grab;
  scroll-behavior: auto;
}
.carousel.dragging img{
  pointer-events: none;
}
.carousel img{
  width: 484px;
  height: auto;
  object-fit: cover;
  user-select: none;
    
  display:block;
  margin-left:16px;
}




@media all and (max-width: 1023px){  
  .wrapper{
    max-width: 941px;
  }
  .card-content {
    padding: 60px 172px 60px 0;
  }
  .carousel img{
    width: 450px;
  }
  .carousel img:first-child{
    margin-left: 0;
  }    
}




@media all and (max-width: 428px){  
    .wrapper{
      max-width: 395px;
    }
    .wrapper .carousel{
      margin-bottom: 45px;
      padding: 0 0 8px;
    }
    .card-content {
      display:none;
    }
    .card_prd {
    margin-left: 0;
  }
    .carousel img{
      width: 395px;
    }    
    
    .wrapper i:first-child{
      left: 0px; /* needs position: absolute */
    }
    .wrapper i:last-child{
      right: 0px; /* needs position: absolute */
    }    
  
}

@media all and (max-width: 375px){ 
  .wrapper{
    max-width: 344px;
  }
  .carousel img{
    width: 344px;
  }    

}

const carousel = document.querySelector(".carousel"),
firstImg = carousel.querySelectorAll("img")[0],
arrowIcons = document.querySelectorAll(".wrapper i");

let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;

const showHideIcons = () => {
    // showing and hiding prev/next icon according to carousel scroll left value
    let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
    arrowIcons[0].style.display = carousel.scrollLeft == 16 ? "none" : "block";
    arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
}

arrowIcons.forEach(icon => {
    icon.addEventListener("click", () => {
        let firstImgWidth = firstImg.clientWidth + 16; // getting first img width & adding 14 margin value
        // if clicked icon is left, reduce width value from the carousel scroll left else add to it
        carousel.scrollLeft += icon.id == "left" ? -firstImgWidth : firstImgWidth;
        setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
    });
});

const autoSlide = () => {
    // if there is no image left to scroll then return from here
    if(carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;

    positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
    let firstImgWidth = firstImg.clientWidth + 16;
    // getting difference value that needs to add or reduce from carousel left to take middle img center
    let valDifference = firstImgWidth - positionDiff;

    if(carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
        return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
    }
    // if user is scrolling to the left
    carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
}

const dragStart = (e) => {
    // updatating global variables value on mouse down event
    isDragStart = true;
    prevPageX = e.pageX || e.touches[0].pageX;
    prevScrollLeft = carousel.scrollLeft;
}

const dragging = (e) => {
    // scrolling images/carousel to left according to mouse pointer
    if(!isDragStart) return;
    e.preventDefault();
    isDragging = true;
    carousel.classList.add("dragging");
    positionDiff = (e.pageX || e.touches.pageX) - prevPageX;
    carousel.scrollLeft = prevScrollLeft - positionDiff;
    showHideIcons();
}

const dragStop = () => {
    isDragStart = false;
    carousel.classList.remove("dragging");

    if(!isDragging) return;
    isDragging = false;
    autoSlide();
}

carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("touchstart", dragStart);

document.addEventListener("mousemove", dragging);
carousel.addEventListener("touchmove", dragging);

document.addEventListener("mouseup", dragStop);
carousel.addEventListener("touchend", dragStop);