Swiper.js does not scroll on first page

Question

I am building a website which uses swiper.js. When I click on a button a small swiper page will display the product details. But it does not scroll on the first page. I need to hover my mouse outside the swiper page and hover it back again to make it scroll. This is what i've tried.

var swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    slidesPerView: 1,
    spaceBetween: 30,
    keyboard: {
      enabled: true,
      onlyInViewport: false,
    },
    mousewheel: {
      enabled: true,
      invert: false,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

    simulateTouch:false,

});

HTML:

<div class="swiper-container">
    <div class="swiper-wrapper">
            <div class="swiper-slide">
                Product Details ....
            </div>

            <div class="swiper-slide">
                Stocks ....
            </div>


            <div class="swiper-slide">
                 Reviews ....
            </div>
    </div>
</div>

JoshG JoshG · Accepted Answer · 2020-06-19T09:03:10

You may need to set a size on the .swiper-container class.

Here's an example using your code. I added the navigation buttons. Take a look at the CSS that I added below:

var swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  slidesPerView: 1,
  spaceBetween: 30,
  keyboard: {
    enabled: true,
    onlyInViewport: false,
  },
  mousewheel: {
    enabled: true,
    invert: false,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  simulateTouch: false,

});

html, body {
  position: relative;
  height: 100%;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      Product Details ....
      <div class="swiper-button-prev">
      </div>
      <div class="swiper-button-next">
      </div>
    </div>

    <div class="swiper-slide">
      Stocks ....
      <div class="swiper-button-prev">
      </div>
      <div class="swiper-button-next">
      </div>
    </div>


    <div class="swiper-slide">
      Reviews ....
      <div class="swiper-button-prev">
      </div>
      <div class="swiper-button-next">
      </div>
    </div>
  </div>
</div>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

Swiper.js does not scroll on first page

1 Answers