javascript - 为图像的水平轮播创建鼠标滚轮导航选项

Question

我使用 Twitter Bootstrap 4 和 perfect-scrollbar plugin 制作了图像(和字幕)的水平轮播。 .

我希望用户能够使用鼠标滚轮 进行导航。插件 dos 有一个我确实使用的处理程序选项。

var ps = new PerfectScrollbar('#carousel', {
  maxScrollbarLength: 100,
  handlers: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch']
});

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
.hero {
  height: 100vh;
  background: #212121;
  justify-content: center;
  align-items: center;
}

#carousel {
  display: flex;
  list-style-type: none;
  position: relative;
  margin: 0;
  padding: 0;
  justify-content: left;
  align-items: center;
}
#carousel li {
  padding: 0 0 70px 0;
  flex-shrink: 0;
}
#carousel li a {
  text-decoration: none;
  color: #fff;
}
#carousel li img {
  display: block;
  width: 100%;
}
#carousel li .caption {
  padding: 20px 20px 0 20px;
}
#carousel li h2 {
  font-size: 20px;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#carousel li p {
  font-size: 10px;
  padding: 0;
  margin: 5px 0 0 0;
}
#carousel .ps__rail-x {
  background: #5C5C5C;
  height: 3px;
  margin: 0 40%;
}
#carousel .ps__thumb-x {
  height: 3px;
  margin-bottom: -2px;
  border-radius: 0;
  background: #fff;
}

@media (max-width: 575px) {
  #carousel li {
    width: 100%;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code-love.tk/demos/prop/lib/css/perfect-scrollbar.css" />
<script src="https://code-love.tk/demos/prop/lib/js/perfect-scrollbar.min.js"></script>

<div class="page-wrapper">
  <div class="hero d-flex">
    <ul id="carousel">
      <li class="col-xs-12 col-sm-6 col-md-4">
        <a href="#">
        <img src="https://placeimg.com/600/400/people" alt="">
        <div class="caption">
          <h2>Lorem ipsum</h2>
          <p>O poveste adevarata</p>
        </div>
        </a>
      </li>
      <li class="col-xs-12 col-sm-6 col-md-4">
        <a href="#">
        <img src="https://placeimg.com/600/400/nature" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>Lorem ipsum dolor sit</p>
        </div>
        </a>
      </li>
      <li class="col-xs-12 col-sm-6 col-md-4">
        <a href="#">
        <img src="https://placeimg.com/600/400/arch" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
        </a>
      </li>
      <li class="col-xs-12 col-sm-6 col-md-4">
        <a href="#">
        <img src="https://placeimg.com/600/400/animals" alt="">
        <div class="caption">
          <h2>Into the wild</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
        </a>
      </li>
    </ul>
  </div>
</div>

但它没有按预期方式工作。喜欢 THIS ，例如。

问题:

1. 是我用错了，还是插件没有这样的选项？
2. 我有什么选择？

Answer 1

插件中为此内置了一个选项“useBothWheelAxes: true。

var ps = new PerfectScrollbar('#carousel', {
  maxScrollbarLength: 100,
  useBothWheelAxes: true
});

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
.hero {
  height: 100vh;
  background: #212121;
  justify-content: center;
  align-items: center;
}

#carousel {
  display: flex;
  list-style-type: none;
  position: relative;
  margin: 0;
  padding: 0;
  justify-content: left;
  align-items: center;
}
#carousel li {
  padding: 0 0 70px 0;
  flex-shrink: 0;
}
#carousel li a {
  text-decoration: none;
  color: #fff;
}
#carousel li img {
  display: block;
  width: 100%;
}
#carousel li .caption {
  padding: 20px 20px 0 20px;
}
#carousel li h2 {
  font-size: 20px;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#carousel li p {
  font-size: 10px;
  padding: 0;
  margin: 5px 0 0 0;
}
#carousel .ps__rail-x {
  background: #5C5C5C;
  height: 3px;
  margin: 0 40%;
}
#carousel .ps__thumb-x {
  height: 3px;
  margin-bottom: -2px;
  border-radius: 0;
  background: #fff;
}

@media (max-width: 575px) {
  #carousel li {
    width: 100%;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code-love.tk/demos/prop/lib/css/perfect-scrollbar.css" />
<script src="https://code-love.tk/demos/prop/lib/js/perfect-scrollbar.min.js"></script>

<div class="page-wrapper">
  <div class="hero d-flex">
    <ul id="carousel">
      <li class="col-xs-12 col-sm-6 col-md-4">
        <a href="#">
        <img src="https://placeimg.com/600/400/people" alt="">
        <div class="caption">
          <h2>Lorem ipsum</h2>
          <p>O poveste adevarata</p>
        </div>
        </a>
      </li>
      <li class="col-xs-12 col-sm-6 col-md-4">
        <a href="#">
        <img src="https://placeimg.com/600/400/nature" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>Lorem ipsum dolor sit</p>
        </div>
        </a>
      </li>
      <li class="col-xs-12 col-sm-6 col-md-4">
        <a href="#">
        <img src="https://placeimg.com/600/400/arch" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
        </a>
      </li>
      <li class="col-xs-12 col-sm-6 col-md-4">
        <a href="#">
        <img src="https://placeimg.com/600/400/animals" alt="">
        <div class="caption">
          <h2>Into the wild</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
        </a>
      </li>
    </ul>
  </div>
</div>