Skip to main content
se añadieron 2296 caracteres en el cuerpo
Origen Enlace
masterguru
  • 16k
  • 5
  • 15
  • 28

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>

Debes separar el div del contenedor (services-info) 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 services-info:

Debes separar el div del wrapper (swiper-wrapper) 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 swiper-wrapper:

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>

Origen Enlace
masterguru
  • 16k
  • 5
  • 15
  • 28

Debes separar el div del contenedor (services-info) 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 services-info:

<div class="swiper-button-next"></div>

y borra el </div> que aparece después de esta línea de la paginación:

<div class="swiper-pagination"></div>