Можно добавить overlay, на который повесить обработчик события.
Добавляем overlay:

<div class="overlay">
<div class="menu">
//code...
</div>
</div>

И добавляем скрипт на закрытие:

function addMenu () {
menu.style.display = 'block'
overlay.style.display = 'block'
overlay.addEventListener('click', closeMenu)
}
function closeMenu(e) {
if (e.target.classList.contains('overlay')) {
menu.style.display = 'none'
overlay.style.display = 'none'
overlay.removeEventListener('click')
}
}

То есть, мы вешаем слушатель клика по overlay и проверяем кликнули ли по самому overlay или по попапу. Если по overlay, то закрываем overlay и попап.

Ну и, конечно, лучше оперировать классами в этом случае, а не стилями. Классами проще, и проще анимировать все это дело.

Может, конечно, не совсем правильно вас понял, но у Swiper уже есть готовое решение. Нам необходимо только установить ширину для наших слайдов и поставить свойство slidesPerView: "auto"

Если нужно прям изменить код, то лучше поковыряться в самом плагине (в файлах на сервере). А если нужно как то дополнить своим js, то можно установить пак essential-addons и в редакторе появится такое же поле как и для CSS