CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-4
Pushparaj
Pushparaj

Reputation: 1080

How to scroll to next section of page when Bootstrap carousel scrolled to it's last child horizontally

HTML

<div id="slider" class="carousel slide" data-ride="carousel">
    <!-- The slideshow -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <h1>lorem</h1>
        </div>
        <div class="carousel-item">
           <h1>lorem</h1>
        </div>
        <div class="carousel-item">
            <h1>lorem</h1>
        </div>
    </div>

    <ul class="carousel-indicators">
        <li data-target="#slider" data-slide-to="0" class="item0 active"></li>
        <li data-target="#slider" data-slide-to="1" class="item1"></li>
        <li data-target="#slider" data-slide-to="2" class="item2"></li>
    </ul>
</div>

JS

$('#slider').bind('mousewheel', function(e){
    e.preventDefault();

    if(e.originalEvent.wheelDelta /120 > 0) {
        $(this).carousel('prev');
    }
    else if ($("#slider .carousel-inner .carousel-item:last").hasClass("active")) {
        e.stopPropagation();
    }
    else{
        $(this).carousel('next');
    }
});

Here, the mouseweel event listener is moving the Bootstrap carousel to the next slider. How to scroll the page to the next section when the carousel reached it's last slide. Thanks in advance!

Upvotes: 0

Views: 2015

Answers (1)

dferenc
dferenc

Reputation: 8126

Instead of e.stopPropagation(); you should use $('#slider').off('mousewheel');. However, there are couple of things to note here as well:

  • First off, .bind() has been deprecated as of jQuery 3.0, thus you should not use it any more. Use .on() instead to bind event listeners.
  • Second, the mousewheel event has the delta value available as it's second argument. So instead of using e.originalEvent.wheelDelta you could simply use that.
  • The .carousel-inner part in the css selector of the else if is unnecessary, as #slider .carousel-item already targets the required elements.
  • FYI: The wheelDelta / 120 division is completely useless in this situation as you compare the result to zero.

So your script could look something like this:

$('#slider').on('mousewheel', function(e, delta) {
    e.preventDefault();

    if (delta > 0) {
        $(this).carousel('prev');
    }
    else if ($("#slider .carousel-item:last").hasClass("active")) {
        // e.stopPropagation();
        $('#slider').off('mousewheel');
    }
    else {
        $(this).carousel('next');
    }
});

Working snippet ahead: 

$('#slider').on('mousewheel', function(e, delta) {
    e.preventDefault();
    if (delta > 0) {
        $(this).carousel('prev');
    }
    else if ($("#slider .carousel-item:last").hasClass("active")) {
        // e.stopPropagation();
        $('#slider').off('mousewheel');
    }
    else {
        $(this).carousel('next');
    }
});
body {
    height: 200vh;
    background-color: #E6E6FA !important;
}

#slider {
    background-color: grey;
}
<div id="slider" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <h1>lorem</h1>
        </div>
        <div class="carousel-item">
           <h1>lorem</h1>
        </div>
        <div class="carousel-item">
            <h1>lorem</h1>
        </div>
    </div>

    <ul class="carousel-indicators">
        <li data-target="#slider" data-slide-to="0" class="item0 active"></li>
        <li data-target="#slider" data-slide-to="1" class="item1"></li>
        <li data-target="#slider" data-slide-to="2" class="item2"></li>
    </ul>
</div>



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

Upvotes: 1

Related Questions