Mouse-wheel & K/board Up/Down bullet navigation based on data-attribute using jQuery

Question

I've a WordPress page that have a slider with pagination and a footer div.

Now, the pagination only contain class pagination & active, and each pagination options have unique data-page value.

May I know how can I make the mouse-wheel, kboard up/down & page-up/down button to navigate through the pagination without any external plugin. Also, when the pagination finish, if the user press down one more time, it will reveal the footer and no active class for the pagination.

Example like this https://causeeffect.asia/services/

Anyway, I can't replicate 100% because the slider is from WordPress plugin, but the codes below are basically what it looks like.

window.slide = new SlideNav();

body, html {
 margin: 0;
 padding: 0;
}

.section {
 min-height: 800px;
 position: relative;
 text-align: center;
 font-family: sans-serif, arial;
 margin: 0;
}

h1, p {
 margin: 0;
 font-family: sans-serif, arial;
 font-weight: bold;
}

.text-wr {
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 -o-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}

#section1 {
 background: #5c53aa;
 color: #8d86c3;
}

#section2 {
 background: #4bbfc3;
 color: #81d2d5;
}

#section3 {
 background: #283044;
 color: #686e7c;
}

#section4 {
 background: #ebf5ee;
 color: #aeb9b9;
}

h1 {
 font-size: 50px;
 margin-bottom: 25px;
}

.title-top {
 font-size: 60px;
 padding-bottom: 30px;
}

.title-bottom {
 font-size: 30px;
}

.title-tx {
 font-size: 20px;
 opacity: 0.8;
}

.nav {
 position: fixed; /*left: 50%;*/
 width: 100%;
 top: 20px;
 z-index: 9;
 padding-left: 10px;
}

.nav a {
 padding: 7px 20px;
 border-radius: 7px;
 margin-right: 10px;
 background: rgba(255, 255, 255, 0.5);
 -webkit-transition: all 0.2s ease-out;
 -moz-transition: all 0.2s ease-out;
 -ms-transition: all 0.2s ease-out;
 -o-transition: all 0.2s ease-out;
 transition: all 0.2s ease-out;
 text-decoration: none;
 color: black;
 font-family: sans-serif, arial;
 font-weight: 100;
}

.nav a.active {
 background: rgba(0, 0, 0, 0.5);
 color: white;
}

.nav a:hover {
 background: rgba(255, 255, 255, 0.7);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://qmixi.github.io/slide-nav/dist/slideNav.js"></script>

    <div class="nav">
        <nav>
            <a href="#section1" class="pagination active" data-page="0">Link to section 1</a>
            <a href="#section2" class="pagination" data-page="1">Link to section 2</a>
            <a href="#section3" class="pagination" data-page="2">Link to section 3</a>
            <a href="#section4" class="pagination" data-page="3">Link to section 4</a>
        </nav>
    </div>
    <div id="section1" class="section">
        <div class="text-wr">
            <h1 class="title">
                <div class="title-top">Slide Nav Example</div>
                <div class="title-tx">Created by Piotr Kumorek</div>
            </h1>
        </div>
    </div>
    <div id="section2" class="section">
        <div class="text-wr">
            <h1 class="title">Section 2</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
        </div>
    </div>
    <div id="section3" class="section">
        <div class="text-wr">
            <h1 class="title">Section 3</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
        </div>
    </div>
    <div id="section4" class="section">
        <div class="text-wr">
            <h1 class="title">Section 4</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
        </div>
    </div>
    <footer id="footer" class="section">
        <div class="text-wr">
            <h1 class="title">Footer Area</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
        </div>
    </footer>

score 0 · Answer 1 · answered Mar 12 '19 at 18:37

You can use jQuery keydown event for up/down/pageup/pagedown event and also can use mouse scroll as well. Check below code for keyboard keys like:

document.onkeydown = function(e) {
    if (e.keyCode == 38 || e.keyCode == 33 ) { 
        //do your code here for slide next
    } else if(e.keyCode == 40 || e.keyCode == 34) { 
       //do your code for slide pervious
    }
}

And for mouse scroll, you can use below code referenced from: How can I determine the direction of a jQuery scroll event?

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

Hope it helps you.

Mouse-wheel & K/board Up/Down bullet navigation based on data-attribute using jQuery

1 Answers1