0

Estoy implementando Swiper 4.3.5 en mi nueva web portfolio y he podido usar la versión vertical sin problemas en una de las secciones. Pero en otra sección necesito el slider horizontal centrado (ejemplo página oficial) y no lo consigo. He comparado con el que me funciona y con el ejemplo del código de ejemplo del slider horizontal de la página oficial (aquí) y no consigo que funcione, sólo me muestra la primera imagen.

Podéis ver mi código y el problema en vivo aquí.

Tengo mi nueva web acabada a falta de solucionar este problema.

¿Alguien que puede ayudarme?

Muchas gracias de antemano.

1 respuesta 1

0

El problema lo tienes en el css main.css en la parte que dice SECTION: LOGOS. El bloque de css que te esta dañando todo es:

.swiper-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
}

Te voy a colocar un ejemplo sin ese bloque y con dicho bloque.

1) Sin el bloque css swiper-wrapper:

var mySwiper = new Swiper('.swiper-container', {
    slidesPerView: 3,
    spaceBetween: 30,
    centeredSlides: true,
    keyboard: {
        enabled: true,
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
});
.swiper-container {
    width: 100vw;
    height: 100vh;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

/* ------------------- SECTION: LOGOS  ------------------- */

.swiper-container {
    width: 100%;
    height: 100vh;
}
.swiper-container {
    background: var(--cream);
}

.swiper-slide {
    width: 100%;
    height: 100vh;
}
.swiper-pagination-bullet-active {
    background: #fff;
}
.swiper-container-vertical > .swiper-pagination-bullets {
    right: 1.5rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.js"></script>

<div class="swiper-container">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          <img src="http://78.media.tumblr.com/d4b3b509dea5f94df7b47afa03d2b6bf/tumblr_mgjcu1eNo71qizfqio1_500.jpg">
      </div>
      <div class="swiper-slide">
          <img src="http://78.media.tumblr.com/d4b3b509dea5f94df7b47afa03d2b6bf/tumblr_mgjcu1eNo71qizfqio1_500.jpg">
      </div>
      <div class="swiper-slide">
          <img src="http://78.media.tumblr.com/d4b3b509dea5f94df7b47afa03d2b6bf/tumblr_mgjcu1eNo71qizfqio1_500.jpg">
      </div>
      <div class="swiper-slide">
          <img src="http://78.media.tumblr.com/d4b3b509dea5f94df7b47afa03d2b6bf/tumblr_mgjcu1eNo71qizfqio1_500.jpg">
      </div>
      <div class="swiper-slide">
          <img src="http://78.media.tumblr.com/d4b3b509dea5f94df7b47afa03d2b6bf/tumblr_mgjcu1eNo71qizfqio1_500.jpg">
      </div>
      <div class="swiper-slide">
          <img src="http://78.media.tumblr.com/d4b3b509dea5f94df7b47afa03d2b6bf/tumblr_mgjcu1eNo71qizfqio1_500.jpg">
      </div>
      <div class="swiper-slide">
          <img src="http://78.media.tumblr.com/d4b3b509dea5f94df7b47afa03d2b6bf/tumblr_mgjcu1eNo71qizfqio1_500.jpg">
      </div>
      <!-- .swiper-wrapper -->
  </div>
  <div class="swiper-pagination"></div>
  <!-- .swiper-slide -->
</div>

2) Con el bloque css swiper-wrapper:

var mySwiper = new Swiper('.swiper-container', {
    slidesPerView: 3,
    spaceBetween: 30,
    centeredSlides: true,
    keyboard: {
        enabled: true,
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
});
.swiper-container {
    width: 100vw;
    height: 100vh;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

/* ------------------- SECTION: LOGOS  ------------------- */

.swiper-container {
    width: 100%;
    height: 100vh;
}
.swiper-container {
    background: var(--cream);
}

.swiper-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
}

.swiper-slide {
    width: 100%;
    height: 100vh;
}
.swiper-pagination-bullet-active {
    background: #fff;
}
.swiper-container-vertical > .swiper-pagination-bullets {
    right: 1.5rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.js"></script>

<div class="swiper-container">
  <div class="swiper-wrapper">
      <div class="swiper-slide">
          <img src="http://78.media.tumblr.com/d4b3b509dea5f94df7b47afa03d2b6bf/tumblr_mgjcu1eNo71qizfqio1_500.jpg">
      </div>
      <div class="swiper-slide">
          <img src="http://78.media.tumblr.com/d4b3b509dea5f94df7b47afa03d2b6bf/tumblr_mgjcu1eNo71qizfqio1_500.jpg">
      </div>
      <div class="swiper-slide">
          <img src="http://78.media.tumblr.com/d4b3b509dea5f94df7b47afa03d2b6bf/tumblr_mgjcu1eNo71qizfqio1_500.jpg">
      </div>
      <div class="swiper-slide">
          <img src="http://78.media.tumblr.com/d4b3b509dea5f94df7b47afa03d2b6bf/tumblr_mgjcu1eNo71qizfqio1_500.jpg">
      </div>
      <div class="swiper-slide">
          <img src="http://78.media.tumblr.com/d4b3b509dea5f94df7b47afa03d2b6bf/tumblr_mgjcu1eNo71qizfqio1_500.jpg">
      </div>
      <div class="swiper-slide">
          <img src="http://78.media.tumblr.com/d4b3b509dea5f94df7b47afa03d2b6bf/tumblr_mgjcu1eNo71qizfqio1_500.jpg">
      </div>
      <div class="swiper-slide">
          <img src="http://78.media.tumblr.com/d4b3b509dea5f94df7b47afa03d2b6bf/tumblr_mgjcu1eNo71qizfqio1_500.jpg">
      </div>
      <!-- .swiper-wrapper -->
  </div>
  <div class="swiper-pagination"></div>
  <!-- .swiper-slide -->
</div>

P.D: si te sirvió mi respuesta no olvides tildar mi respuesta como la ganadora, saludos!!!.

3
  • Qué grande David Leonardo!!! Excelente ayuda. No sabes lo loco que estaba porque no daba con el problema. Resulta que mi error fue usar las clases originales del slider que también estoy usando en otra sección de la web y afectaban a este otro slider ¿Te importaría decirme cómo encontraste el problema? Mil gracias por tu tiempo y dedicación en dejarme los ejemplos en live! el 18 sep. 2018 a las 21:52
  • Entre en tu codigo que compartistes por un enlace y empece a debuguear a lo macho jajaja es la unica manera ir descartando porque el css no es como js que es mas facil de debuguear, ademas como estoy cansado de hacer esos carouseles se por donde iba la mano, que bueno que te sirviera. Saludos el 18 sep. 2018 a las 22:55
  • Muchas gracias de nuevo David Leonardo. Yo estoy todavía aprendiendo porque soy diseñador gráfico pero me gusta mucho el diseño web aunque me cuesta más de lo que quisiera. Saludos el 20 sep. 2018 a las 16:59

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.