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