Estoy intentando implementar Swiper en una sección que he creado. Al momento de agregar las clases de swiper solo me genera las flechas de adelante y atrás pero no la acción de poder deslizar mi contenido.
En HTML tengo lo siguiente:
<!-- SwiperJS -->
<link rel="stylesheet" href="css/swiper-bundle.min.css">
<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 class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<!-- SwiperJS -->
<script src="js/swiper-bundle.min.js"></script>
En JavaScript:
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,
});
¿En parte de mi código estoy agregando mal las clases para que no me de la funcionalidad de desplazamiento?