Estoy haciendo un control deslizante con JavaScript.

Al implementar un control deslizante, si no hace pointer-events:none , el control deslizante no funciona normalmente de la siguiente manera.

Por lo tanto, si coloca pointer-events: none en el elemento principal, puede ver que el control deslizante funciona con normalidad.

Quiero que sea posible hacer clic en los elementos del control deslizante.

Sin embargo, si pointer-events: none en el elemento principal, no funcionará incluso si registra un evento de clic.

Lo que tengo curiosidad es lo siguiente.

1. Me pregunto por qué el control deslizante funciona de manera extraña cuando no hago pointer-events: none .
2. Me pregunto cómo los elementos secundarios pueden operar el evento de clic con eventos de pointer-events: none activado.

Aquí está mi código (código sandbox)