Скрипт слайдер swiper, при адаптации выходит за края блока

Поставил скрипт чтобы подгружать фотки товаров.
Скрипт: swiper

Работает хорошо, но есть проблема с адаптацией.
Подгружаю картинки с бд, все подгружает и выводит.

Вывожу так
<div class="swiperc">
<div class="swiper">
<div class="swiper-wrapper">
<?php foreach ($productsFound as $product) : ?>
<a class="swiper-slide" href="<?= Helper_Tree::getUrlProduct($product->id) ?>" title="Перейти в товар - <?= $product->prname ?>">
<?php if ($product->getImage()) : ?>
<img src="/media/uploads/small/small-<?php echo ($product->getImage()) ?>" alt="<?= $product->prname ?>" title="Перейти в товар - <?= $product->prname ?>" />
<?php else : ?>
<img src="/media/uploads/nofoto.jpg" alt="Нет фото на товаре" title="Нет фото" />
<?php endif; ?>
</a>
<?php endforeach; ?>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>

Конфикг скрипта
<script>
//слайдер для выбора цвета
var swiper = new Swiper('.swiper', {
slidesPerView: 4, //кол-во слайдов
spaceBetween: 15, //отступы между слайдами
freeMode: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
1150: {
slidesPerView: 4,
},
1024: {
slidesPerView: 3,
},
768: {
slidesPerView: 2,
},
675: {
slidesPerView: 1,
}
}
});
</script>

--------------------------------------------------
До адаптации, выглядит это так.

Когда я адаптирую, чтобы было в ряд 3 фотки.
То выглядит это так, видно что блок весь ушел куда-то.




Почему так происходит понять не могу, но понял одно, если я не использую php, то все ок.
Если делаю вот так, то все окей адаптирует и нет проблем.
<div class="swiperc">
<div class="swiper">
<div class="swiper-wrapper">
<a class="swiper-slide" href="" title="">
<img src="/media/uploads/nofoto.jpg" alt="Нет фото на товаре" title="Нет фото" />
</a>
<a class="swiper-slide" href="" title="">
<img src="/media/uploads/nofoto.jpg" alt="Нет фото на товаре" title="Нет фото" />
</a>
<a class="swiper-slide" href="" title="">
<img src="/media/uploads/nofoto.jpg" alt="Нет фото на товаре" title="Нет фото" />
</a>
<a class="swiper-slide" href="" title="">
<img src="/media/uploads/nofoto.jpg" alt="Нет фото на товаре" title="Нет фото" />
</a>
<a class="swiper-slide" href="" title="">
<img src="/media/uploads/nofoto.jpg" alt="Нет фото на товаре" title="Нет фото" />
</a>
<a class="swiper-slide" href="" title="">
<img src="/media/uploads/nofoto.jpg" alt="Нет фото на товаре" title="Нет фото" />
</a>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>


Пытаюсь понять в чем тут дело, почему <?php foreach ($productsFound as $product) : ?>, как-то влияет на адаптацию, бред какой-то


Есть рабочий пример, но тут без php, https://jsfiddle.net/vlit/ag14ju8s/468/