offsiderst

Не вкладывай блочные элементы в строчные, смотри документацию W3C, можно быструю справку.

После всех изменений:
swiper.update();
https://jsfiddle.net/l2banners/3oavyp4c/

Нельзя так перечислить несколько событий. Смотрите доку: https://developer.mozilla.org/ru/docs/Web/API/Even...

type
Чувствительная к регистру строка, представляющая тип прослушиваемого события.

То есть только один тип события.
Но можно несложный цикл организовать. Так работает.

['click', 'mouseover']. map(type => document.querySelector('.o').addEventListener(type, (event)=> {
  console.log(event.type, document.querySelector('.o').textContent);
}))

Можно переопределить margin через css:

Возможно есть и по лучше решения. Если будет несколько sum в массиве объектов? Конкретно под эту задачу решение:

var info = [{
  desc: 'elem',
  number: 10,
}, {
  desc: 'elem2',
  number: 20,
}, {
  sum: 200,
}];

var sum = info.filter(i => i.sum).shift().sum;
var res = info.filter(i => i.number).map(m => (m.number / sum) * 100);



console.log(res);// [5, 10]

[1,"", null, NaN, 2, undefined,4,5,6].filter(Boolean); //[1, 2, 4, 5, 6]

[{
  desc: 'elem',
  number: 10,
}, {
  desc: 'elem2',
  number: 12,
}, {
  count: 300,
}].filter(i => i.number).map( m => m.number); // [10, 12]