I'm making a slider with JavaScript.

When implementing a slider, if you do not do pointer-events:none, the slider does not operate normally as follows.

Therefore, if you put pointer-events: none on the parent element, you can see that the slider is operating normally.

I want to make it possible to click on the elements in the slider.

However, if you do pointer-events: none in the parent element, it will not work even if you register a click event.

What I'm curious about is as follows.

1. I wonder why the slider works strangely when I don't do pointer-events: none.
2. I wonder how the child elements can operate the click event with pointer-events: none on.

Here is my code (code sandbox)