Debes separar el div del contenedorwrapper (servicesswiper-infowrapper) de la paginación y los botones, pues ahora mismo estan dentro del mismo.
Dicho de otro modo, pon un </div>
por encima de esta línea para cerrar el div con clase servicesswiper-infowrapper:
Te dejo un ejemplo completo funcional:
let swiper = new Swiper(".services-info", {
cssMode: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
},
mousewheel: true,
keyboard: true,
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<section class="services section" id="services">
<div class="services-info container_services swiper-container">
<div class="swiper-wrapper">
<div class="services_content grid-services swiper-slide">
<img src="img/Slideshow4.jpg" alt="" class="services-img">
<div class="services-data">
<h3>Lorem...</h3>
<p class="services-description">Lorem...</p>
</div>
</div>
<div class="services_content grid-services swiper-slide">
<img src="img/Slideshow4.jpg" alt="" class="services-img">
<div class="services-data">
<h3>Lorem...</h3>
<p class="services-description">Lorem...</p>
</div>
</div>
<div class="services_content grid-services swiper-slide">
<img src="img/Slideshow4.jpg" alt="" class="services-img">
<div class="services-data">
<h3>Lorem...</h3>
<p class="services-description">Lorem...</p>
</div>
</div>
<div class="services_content grid-services swiper-slide">
<img src="img/Slideshow4.jpg" alt="" class="services-img">
<div class="services-data">
<h3>Lorem...</h3>
<p class="services-description">Lorem...</p>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</section>