Если подразумевается фиксированная высота блоков по бокам, то по два накладывающихся друг на друга CSS-треугольника с каждой стороны сойдёт.
Если не важна поддержка IE и EDGE, если нужно адаптировать высоту этих двух блоков под высоту контента — удобнее это сделать с помощью clip-path: https://bennettfeely.com/clippy/
MFNIK, и не только у Swiper. С псевдоэлементами вообще нельзя взаимодействовать с помощью JS. Это элементы стилей (CSS). Это то же самое, если бы вы пытались повесить событие на box-shadow какого-то элемента.
