I want to scroll the content horizontally.

<div class="slider-section">
        <div class="slider">
          <div class="slide">1</div>
          <div class="slide">2</div>
          <div class="slide">3</div>
          <div class="slide">4</div>
        </div>
      </div>

css code:

.slider-section {
  max-width: 144rem;
  /* overflow-x: hidden; */
  overflow-x: auto;
}
.slider-section::-webkit-scrollbar {
  width: 0px;
}

.slider {
  max-width: 24rem;
  height: 24rem;
  margin: 0 auto;
  margin-bottom: 4.5rem;
  position: relative;
}

.slide {
  border-radius: 5px;
  margin: 0 3rem;
  position: absolute;
  top: 0;
  width: 100%;
  height: 24rem;
  transition: all 1s;
  background-color: green;
}

js:

const slide = document.querySelectorAll(".slide");

slide.forEach((el, i) => {
  console.log(el);
  el.style.transform = `translateX(${110 * (i - 1)}%)`;
});

However, the content is scrolling on mobile and tablet view but not on desktop view. I also want to scroll the content in the desktop view and I don't want to use any framework or library.I want to use only pure vanila javascript. I hope this can be done with the help of javascript. you can check the code from here