в кодпен явно не хватает box-sizing- точно, если в кодпен у
Проверь настройку swiper freemode- freemode отсутствует в настройках. На всякий для теста с freemode = false ситуация сохраняется.
А лучше свой вариант в codepen сделай.- свой вариант. Не идентично с проектным, но также слайды при пролистывании не полностью видны. Будто расчет происходит не на основании контейнера.
<body class="body modal-open">
<header class="header fixed-header">
<div class="container-fluid header-container pl-0 pr-0 header--fixed">
<div class="top-menu"></div> <!--первая строка меню-->
<div class="navbar"></div> <!-- вторая строка меню-->
</div>
</header>
</body>body.modal-open>header>.header--fixed {
padding-right: 17px !important;
}body.modal-open>.header--fixed {
padding-right: 17px !important;
}
Кнопки находятся вне контейнера- есть такое, по макету так задумано, поэтому стрелки были размещены за .swiper-container.
<div class="promo-group__swiper-block">
<div class="promo-group__swiper-container swiper-container">
<ul class="promo-group__list swiper-wrapper grid-container">
<li class="item swiper-slide"></li>
</ul>
<div class="promo-group__arrow-block">
<div class="promo-group__arrow arrow--next"></div>
<div class="promo-group__arrow arrow--prev"></div>
</div>
</div>
</div>Ну так если вы выводите блоки в цикле, то логично, что и swiper нужно инициировать в цикле.
есть попутный вопрос: почему дизайнер первые два элемента нарисовал с текстом и одним расположением, а остальные по-другому?- это блок с иконками соц сетей, первые 2 элемента это одна и та же соц сеть, только название сообщества разное
Можно вопрос: зачем это делать гридом? Он же один из вариантов ответа.- спасибо, что откликнулись) Хотелось попробовать реализовать с помощью grid )
$('.dropdown-list a').on('click', function () {
$(".w-dropdown").trigger("w-close");
});переходите с символьных спрайтов на стеки из svg- правильно понимаю, что имеете ввиду так?
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
<![CDATA[
.sprite { display: none; }
.sprite:target { display: inline; }
]]>
</style>
</defs>
<g class="sprite" id="circle">
<circle cx="50" cy="50" r="45" stroke-width="5" stroke="#0f0" fill="#0f0" fill-opacity="0.5" />
</g>
<g class="sprite" id="square">
<rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#f00" fill="#f00" fill-opacity="0.5" />
</g>
<g class="sprite" id="triangle">
<path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#00f" fill="#00f" fill-opacity="0.5" />
</g>
<g class="sprite" id="home">
<path d="M4.77002 10.4611V24.0769C4.77002 24.3217 4.86727 24.5565 5.04038 24.7296C5.21349 24.9027 5.44828 25 5.6931 25H11.2316V17.1536C11.2316 16.7864 11.3774 16.4342 11.6371 16.1745C11.8968 15.9148 12.249 15.769 12.6162 15.769H17.2316C17.5988 15.769 17.951 15.9148 18.2106 16.1745C18.4703 16.4342 18.6162 16.7864 18.6162 17.1536V25H24.1546C24.3994 25 24.6342 24.9027 24.8073 24.7296C24.9805 24.5565 25.0777 24.3217 25.0777 24.0769V10.4611" stroke="#C15C7B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M27.8462 12.9993L15.5513 1.22977C15.2629 0.925144 14.5885 0.921683 14.2948 1.22977L2 12.9993M23.2308 8.55688V1.92209H20.4615V5.90296" stroke="#C15C7B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg><object type="image/svg+xml" data="/images/sprite2.svg#home"></object>
. Хотелось бы этого избежать. 
Замечено, что поведение отображения не полностью возникает в проекте с 1391px. На 1392px мышью перелистывается корректно. Хотя в codepen, если комментить breakpoints слайды адаптируются и листаются полностью.