0

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?

1 respuesta 1

1

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:

<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>

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>

2
  • Lo que no entiendo es por qué en Codepen sí me funciona tu respuesta, pero al agregarlo a mi página, las flechas se muestran al inicio de la página y no en donde inicia el contenido. Commented el 15 oct. 2022 a las 2:07
  • quizás el contexto de tu página estropea algo, algun css, etc... sin el no puedo ayudarte... o quizas la version del swiper... verifica si son los mismos que yo uso
    – masterguru
    Commented el 15 oct. 2022 a las 2:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.