Как сделать чтобы img выходили за границы страницы, но не ломали фон?

Тогда, вам, наверное, нужно сымитировать поведение слайдера. Скорее всего на мобильном слайдер выводил бы один слайд.
Используя медиазапрос для маленьких экранов, вы можете задать всем потомкам контейнера ваших картинок display:none. Кроме первой, конечно.

@media screen and(max-width: (N)px) {
            .parent .child:not(:first-of-type) {
                display: none;
            }
        }

Как правильно верстать такие фоны для секций?

Максим Ленский, заавно. то есть весь контент запихивается в svg-шки? Спасибо! интересно.

Как правильно верстать такие фоны для секций?

VicTHOR, не совсем понял,что именно анимировать)) Вопрос касался конкретно техники вставки этого элемента: просто в бэкграунд как пнг-шку засунуть или заморачиваться и делать для картинки маску тем или иным способом.
А если экран будет меньше картинка просто сожмется пропорционально.

Как правильно верстать такие фоны для секций?

Максим Ленский, но семантически правильно ведь эти блоки заключить в отдельные теги section? А потом обернуть ещё в один section с каким-нибудь классом main-bg или в див засунуть?

Не могу сверстать слайдер. Какой плагин выбрать, чтоб реализовать макет?

Вы, видимо, не полностью мой вопрос прчитали) Я как раз swiper и использовал.

Не могу сверстать слайдер. Какой плагин выбрать, чтоб реализовать макет?

не хочется jQuery тянуть.
вроде бы подшаманил со swiper.js
получилось более-менее похоже)

Не получается дописать слайдер. Хелп?

Спасибо за ответ!

Я как раз через дата-атрибуты и "связываю" слайды с "кружочками" - так и вычисляю, какой слайд нужно показать при нажатии на конкретный кружок. Но в случае со стрелкой это не канает именно тпотому, что я не знаю, как вытащить этот измененный массив и передать его в кусок кода, отвечающий за прослушку стрелки.

Ну и переставлять в начало требуемый элемент при выборе его не стрелками — это очень нехорошо.

Если честно, это единственая идея, которая мне в голову пришла)) Иначе не знаю, как сделать.