I'm making a simple carousel with scrollLeft, when I press the next button it will scroll based on clientWidth but the child element or card element on the left side is cut off, so I want to make it without cutting the child element or card element

for example on the right side of the container element, the child elements cards 5 & 6 have been cut off (it's okay) so when I press the next button, cards 5 & 6 will be shifted to the left side by being cut off but I don't want it by being cut off,

1. initial view.jpg
2. cut off elements example.jpg
3. without cut off elements example.jpg

here is my code https://jsfiddle.net/xhq1yok8/