change bootstrap carousel slide on scroll

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!

what code have you tried? where are you stuck? – Cruiser May 27 '16 at 13:15 — Cruiser, May 27 '16 at 13:15
There are answers to your questions. Check them out. – Razvan Zamfir Jul 13 '18 at 07:38 — Razvan Zamfir, Jul 13 '18 at 07:38

score 1 · Answer 1 · edited May 23 '17 at 12:31

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');
  }
});

edited May 23 '17 at 12:31

Community

1
1

answered May 27 '16 at 17:05

Charlie

1,117
9
12

hi charlie, thanks for your answer im sorry i couldn't reply to you sooner. the code that you answered works fine in chrome and any other browser except my firefox browser. i tried to find the problem by disabling every add-on i have but that didn't fix it. version no 46.0.1 maybe you have any ideas? – May 30 '16 at 07:28

Razvan Zamfir · Answer 2 · 2018-07-08T09:27:14.300

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>

score 0 · Answer 3 · answered Jul 08 '18 at 09:49

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>

with your script how do I define how much I want to scroll until I change the slide? for eche slide? — David Mv, Apr 05 '21 at 15:25

change bootstrap carousel slide on scroll

3 Answers3