在滚动时更改引导程序轮播幻灯片

Question

i am currently building a website in vertical scrolling, to achieve this I am building the whole site in the bootstrap carousel, but no matter what I try I can not get the carousel to move when I use my scroll wheel, I have tried using this

that didn't work

I don't really have any advanced knowledge of javascript hence my question.

Thanks in advance!

Answer 1

The jQuery in the How to turn Bootstrap Carousel slides to change on scroll? answer should suffice.

Here is a working example:

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

Is this what you are looking for?

 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

With text only and vertical scroll.

 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>