Demo #4: Modifying Scroll Amount

HTML

<custom-carousel scroll=500>
   <img src="https://www.cushaway.com/wp-content/uploads/2018/02/Can-Your-Dog-Benefit-from-a-Grain-Free-Diet-825x510.jpg">
   <img src="https://urbanmatter.com/chicago/wp-content/uploads/2019/03/53865742_124709948667133_3375495593978437639_n.jpg">
   <img src="https://www.homefreeanimalrescue.com/uploads/9/4/6/1/94611086/published/maddie-pup-xmas.jpeg?1640668091">
   <img src="https://urbanmatter.com/chicago/wp-content/uploads/2019/03/53865742_124709948667133_3375495593978437639_n.jpg">
</custom-carousel>

CSS

#num1{
   display:block;
   --container-size: 44vw;
  --button-size: 2vw;
}

JS (included in carousel.js file)

#scroll = screen.width * 2;
#scroll = screen.width * 2; 
get scroll() {
        return this.#scroll;
    }
set scroll(v) {
         this.#scroll = v; this.setAttribute("scroll", v);
    }
static get observedAttributes() {
 return ["scroll"] 
}
attributeChangedCallback(name, oldValue, newValue) {
   if (name === "scroll") this.#scroll = newValue;
} 
    connectedCallback(){
        next.addEventListener("click", evt=>{
            container.scrollLeft += this.#scroll;
        })
        prev.addEventListener("click", evt=>{
            container.scrollLeft -= this.#scroll;
        })
    }
  }