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