Swiper with nested vertical slider

Bugs

by jevonmahoney

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<!-- Swiper -->
<div class="swiper-container swiper-container-h">
  <div class="swiper-wrapper">
    <!-- Slide 1 -->
    <div class="swiper-slide">
      <div class="swiper-container swiper-container-v">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="https://via.placeholder.com/600x371/03A9F4/ffffff?text=Slide 1a" /></div>
          <div class="swiper-slide"><img src="https://via.placeholder.com/600x371/29B6F6/ffffff?text=Slide 1b" /></div>
          <div class="swiper-slide"><img src="https://via.placeholder.com/600x371/4FC3F7/ffffff?text=Slide 1c" /></div>
        </div>
      </div>
    </div>
    <!-- Slide 2 -->
    <div class="swiper-slide">
      <div class="swiper-container swiper-container-v">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="https://via.placeholder.com/600x371/4CAF50/ffffff?text=Slide 2a" /></div>
          <div class="swiper-slide"><img src="https://via.placeholder.com/600x371/66BB6A/ffffff?text=Slide 2b" /></div>
          <div class="swiper-slide"><img src="https://via.placeholder.com/600x371/81C784/ffffff?text=Slide 2c" /></div>
        </div>
      </div>
    </div>
    <!-- Slide 3 -->
    <div class="swiper-slide">
      <div class="swiper-container swiper-container-v">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="https://via.placeholder.com/600x371/FFA000/ffffff?text=Slide 3a" /></div>
          <div class="swiper-slide"><img src="https://via.placeholder.com/600x371/FFB300/ffffff?text=Slide 3b" /></div>
          <div class="swiper-slide"><img src="https://via.placeholder.com/600x371/FFC107/ffffff?text=Slide 3c" /></div>
        </div>
      </div>
    </div>
    <!-- Slide 4 -->
    <div class="swiper-slide">
      <div...

SCSS

body {
    background: #e4e8eb;
    font-family: Helvetica,sans-serif;
    text-align: center;
}

.swiper-container {
    width: 600px;
    height: 371px;

    .swiper-pagination-h {
        left: 50%;
        width: 500px;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 8px 0;
}

.swiper-slide {
    height: 100%;
    width: 100%;

    /* 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;
}

.swiper-button-next,
.swiper-button-prev {
  /* In safari, the buttons disappear on some slide,
  to fix this issue set translate3D z axis to 1px */
    -webkit-transform: translate3d(0, 0, 1px);
    -ms-transform: translate3d(0, 0, 1px);
    -o-transform: translate3d(0, 0, 1px);
    transform: translate3d(0, 0, 1px);
}

.swiper-button-next {
    margin-right: 10px;
}

.swiper-button-prev {
    margin-left: 10px;
}

.swiper-button-up,
.swiper-button-down {
    left: 20px;
    position: absolute;
    z-index: 20;

    &:before {
        background-position: center;
        background-repeat: no-repeat;
        -moz-background-size: 27px 44px;
        -webkit-background-size: 27px 44px;
        background-size: 27px 44px;
        content: "";
        cursor: pointer;
        height: 44px;
        width: 27px;
        position: absolute;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

.swiper-button-down {
    top: 10px;

    &:before {
    ...

JavaScript

var swiperH = new Swiper('.swiper-container-h', {
    pagination: '.swiper-pagination-h',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    //slidesPerGroup: 1,
    //slidesPerView: 1,
    speed: 600,
    loop: true,
  });
  var swiperV = new Swiper('.swiper-container-v', {
    pagination: '.swiper-pagination-v',
    paginationClickable: true,
    nextButton: '.swiper-button-up',
    prevButton: '.swiper-button-down',
    speed: 600,
    loop: true,
    direction: 'vertical',
    //effect: 'cube',
  });