поставь бутстрап. там по дефолту это реализовано.
p.s. а если вдаваться в подробности, то на контейнере стоят брекпроинты которые меняют ему ширину в зависимости от окна браузера.
тобишь на декстопе к примеру 1200px фиксировано. и как только ты уменьшишь экран к примеру до 1260px - у контейнера меняется ширина на 992px и так далее
через z-index вряд ли получится. тебе нужно довести форму до нижнего края конверта и там остановить. а потом уменьшать height до нуля. как будто форма пропадает в письме.
если хочешь просто background менять, то не нужно тебе для этого еще и класс вешать и js вообще тут не нужен. просто проследи где у бутсрапа класс active или open добавляется и по классу в css вешай этот бэкграунд.
а в чем проблема самому пару строк js написать? забиваешь в массив src изображений и меняешь их в цикле через settimeout. даже рандомно можно, чтобы при перезагрузке страницы с одного и того же изображения цикл не начинался.
по нормальному лучше делать просто задавая элементу display: none;
я не думаю что у вас там ситуация, что эти элементы будут генерироваться по 100+ штук. а значит полюбому лучше делать через display: none;
с такой задачей не сталкивался, но смотреть нужно в сторону
gulp-html-replace, gulp-inject, gulp-htmlbuild и gulp-resources
которые подключают нужные скрипты на страницу. только вам нужно изменить подключение не скриптов, а просто линков
обычный слайдер. просто при ховере прописано перелистывание слайдера
через kenwheeler.github.io/slick можно сделать используя методы
$('.your-element').slick('slickNext'); и $('.your-element').slick('slickPrev'); при ховере на нужные эелементы