SeptemberOlya

Поступи там учиться и живи

Есть два пути:
1. в стилях прописать
.hero__item {
pointer-events: none;
}

2. В обработке клика использовать e.currentTarget, тогда клик будет только по нужному элементу и не будет трогать детей.

Поясните, что Вам именно надо, так как вы родителя задали overflow: hidden, так это св-во обрезает всё, что находится за пределами родителя.

Но вот Вам посмотреть, подумать: https://jsfiddle.net/2oaxchzu/3/

Можно использовать обычный слйдер и определять выбор по классу slider-current.
Например, slick-slider именно такой класс подставляет текущему слайду, а стрелочки можно сделать отдельным div, а в нём два спана со стрелками и на них повесить обработчик события

Вы можите вставить svg, а с помощью ::after и ::before создать "палки" и отцентрировать как Вам надо