更改滚动条上的引导轮播幻灯片

Question

我目前正在建立一个垂直滚动的网站，为了实现这一点，我正在引导轮播中构建整个网站，但是无论我尝试什么，当我使用滚轮时我都无法让轮播移动，我有尝试使用this

没用

我对 javascript 并没有任何高级知识，因此我的问题是。

提前致谢！

Answer 1

How to turn Bootstrap Carousel slides to change on scroll? 答案中的 jQuery 就足够了。

这是一个工作示例：

http://codepen.io/charliebeckstrand/pen/yJLNmQ

$('#carousel-example-generic').bind('mousewheel', function(e){
  if(e.originalEvent.wheelDelta /120 > 0) {
    $(this).carousel('next');
  }
  else{
    $(this).carousel('prev');
  }
});

Answer 2

这是你要找的吗？

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

var slider = document.getElementById("demo");
var onScroll = debounce(function(direction) {
  //console.log(direction);
  if (direction == false) {
  	$('.carousel-control-next').click();
  } else {
  	$('.carousel-control-prev').click();
  }
}, 100, true);

slider.addEventListener("wheel", function(e) {
  e.preventDefault();
  var delta;
  if (event.wheelDelta) {
    delta = event.wheelDelta;
  } else {
    delta = -1 * event.deltaY;
  }

  onScroll(delta >= 0);
});

.carousel-item {
  height: 100vh;
  background: #212121;
}

.carousel-control-next,
.carousel-control-prev {
  width: 8% !important;
}

.carousel-item.active,
.carousel-item-left,
.carousel-item-right {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.carousel-item h1 {
    color: #fff;
    font-size: 72px;
    padding: 0 10%;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


<div id="demo" class="carousel slide" data-ride="carousel" data-interval="false">

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <h1 class="display-1 text-center">Lorem ipsum dolor sit amet adipisicing</h1>
    </div>
    <div class="carousel-item">
      <h1 class="display-1 text-center">Inventore omnis odio, dolore culpa atque?</h1>
    </div>
    <div class="carousel-item">
     <h1 class="display-1 text-center">Lorem ipsum dolor sit</h1>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>

Answer 3

只有文字和垂直滚动。

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

var slider = document.getElementById("demo");
var onScroll = debounce(function(direction) {
  //console.log(direction);
  if (direction == false) {
  	$('.carousel-control-next').click();
  } else {
  	$('.carousel-control-prev').click();
  }
}, 100, true);

slider.addEventListener("wheel", function(e) {
  e.preventDefault();
  var delta;
  if (event.wheelDelta) {
    delta = event.wheelDelta;
  } else {
    delta = -1 * event.deltaY;
  }

  onScroll(delta >= 0);
});

.carousel-item {
  height: 100vh;
  background: #212121;
}

.carousel-control-next,
.carousel-control-prev {
  width: 8% !important;
}

.carousel-item.active,
.carousel-item-left,
.carousel-item-right {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.carousel-item h1,
.carousel-item p {
   color: #fff;
}

.carousel-item h1 {
    font-size: 72px;
    padding: 0 10%;
 }
 
 .verical. carousel-item-next.carousel-item-left,
.verical .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.verical .carousel-item-next,
.verical .active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100% 0);
}

.verical .carousel-item-prev,
.verical .active.carousel-item-left {
-webkit-transform: translate3d(0,-100%, 0);
        transform: translate3d(0,-100%, 0);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


<div id="demo" class="carousel slide verical" data-ride="carousel" data-interval="false">

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div>
        <h1 class="display-1 text-center">Lorem ipsum dolor sit amet adipisicing</h1>
        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <div>
        <h1 class="display-1 text-center">Inventore omnis odio, dolore culpa atque?</h1>
        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <div>
        <h1 class="display-1 text-center">Lorem ipsum dolor sit</h1>
        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>