0

Here is where I am finding this code https://codepen.io/chriscoyier/pen/pMRgwW

Right now it works by scrolling left and right, but I would also like to add a previous and next button navigation to the top of the slider, but can not figure out how to make it happen. I need a click function to animate the sections to slide.

Any help would be greatly appreciated.

    <div class="slider">
    <section>
        <h1>Section One</h1>
    </section>
    <section>
        <h1>Section Two</h1>
    </section>
    <section>
        <h1>Section Three</h1>
    </section>
    <section>
        <h1>Section Four</h1>
    </section>
    <section>
        <h1>Section Five</h1>
    </section>
</div>


    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    body {
        overflow-y: hidden;
    }
    .slider {
        font-family: sans-serif;
        scroll-snap-type: x mandatory;  
        display: flex;
        -webkit-overflow-scrolling: touch;
        overflow-x: scroll;
    }
    section {
        border-right: 1px solid white;
        padding: 1rem;
        min-width: 100vw;
        height: 100vh;
        scroll-snap-align: start;
        text-align: center;
        position: relative;
    }
    h1  {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
        color: white;
        width: 100%;
        left: 0;
        font-size: calc(1rem + 3vw);
    }

const init = function(){
    let items = document.querySelectorAll('section');
    for (let i = 0; i < items.length; i++){
        items[i].style.background = randomColor({luminosity: 'light'});
    }
    cssScrollSnapPolyfill()
}
init();
CoolRanch_33
  • 1
  • Would be difficult to provide a solution as any such solution would be opinionated on code that is not your own. Whereas if it were your code, you would have sufficient insights on problem areas. Since its not your code, your question I believe comes under "domain" of a code writing service here on SO, meaning you want someone to write the needed code for you. – GetSet Feb 02 '21 at 02:33
  • I do realize you provide an "attempt" but just because it "doesn't work" doesn't negate the original issue that its not your code to begin with. – GetSet Feb 02 '21 at 02:35
  • this discussion might give you a clue https://stackoverflow.com/questions/57518428/css-scroll-snap-points-with-navigation-next-previous-buttons – kusiaga Feb 02 '21 at 02:37

0 Answers0