Swiper. js не прокручивается на первой странице - PullRequest
Новая
       88

Swiper. js не прокручивается на первой странице

0 голосов
/ 19 июня 2020

Я создаю веб-сайт, на котором используется swiper. js. Когда я нажимаю кнопку, на небольшой странице с перелистыванием отображаются сведения о продукте. Но на первой странице не прокручивается. Мне нужно навести указатель мыши на страницу swiper и снова навести ее, чтобы она прокрутилась. Это то, что я пробовал. 

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>

1 Ответ

0 голосов
/ 19 июня 2020

Возможно, вам потребуется установить размер для класса .swiper-container.

Вот пример использования вашего кода. Добавил кнопки навигации. Взгляните на CSS, которое я добавил ниже: 

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