Capitan_S

Вообще-то векторные смарт-объекты еще как редактируемы. Двойной клик на нем и открывается: а) если был сделан в Фотошопе, то в новой вкладке/окне Фотошопа; б) если в Иллюстраторе, то запускается Иллюстратор, в нем открывается смарт-объект. Можно изменить что угодно и закрыть с сохранением, а в Фотошопе он обновится автоматически.
Если в векторе сделан, то просто пересохраните 2 svg с нужными цветами фонов и все.
Если не установлен Иллюстратор, то надо установить.

Или у вас просто слой называется Vector Smart Object, а сам слой растрирован?

https://jsfiddle.net/orLtLar8/42/

Вы подошли к проблеме не с той стороны, смотрите в DOM, чтобы понять что происходит, а должно быть наоборот.
Логика примерно такая:
1. Вы знаете что у вас 10 картинок
2. У вас есть индекс текущей картинки
3. Клики на стрелочки влево/вправо или на точки навигации лишь изменяют этот индекс
4. После изменения индекса, приложение пересчитывает координаты сдвига, и назначает элемент, которому добавить класс active

Ну и никаких повторений кода не будет в этой ситуации.

pointer-events: none; применить к картинке. Но это будет действовать на всей картинке, а не только на прозрачных частях. То есть все клики будут идти сквозь картинку

Потому, что синтаксис у вас неверный.
linear-gradient(to top, #459fcc, #efecec 570px)