时间戳

首页 > 解决方案 > Swiper.js 不在第一页滚动

javascript - Swiper.js 不在第一页滚动

问题描述

我正在建立一个使用 swiper.js 的网站。当我点击一个按钮时，一个小的滑动页面将显示产品详细信息。但它不会在第一页上滚动。我需要将鼠标悬停在滑动页面之外并再次将其悬停以使其滚动。这是我尝试过的。

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>

标签： javascriptswiper

解决方案

您可能需要在.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>

推荐阅读