Quiero desplazar el contenido horizontalmente.

 <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>

codigo css:

 .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)}%)`; });

Sin embargo, el contenido se desplaza en la vista de dispositivo móvil y tableta, pero no en la vista de escritorio. También quiero desplazar el contenido en la vista del escritorio y no quiero usar ningún marco o biblioteca. Quiero usar solo javascript vanila puro. Espero que esto se pueda hacer con la ayuda de javascript. Puedes consultar el código desde aquí .