JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="gf-slider-wrap">
                <a href="#" class="gf-slider__prev">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><g fill="none" stroke="#222" stroke-width="2"><g><circle cx="20" cy="20" r="20" stroke="none"/><circle cx="20" cy="20" r="19"/></g><path data-name="Path 163" d="M22.376 13.154l-7 7 7 7"/></g></svg>
                </a>

            <div class="gf-slider">
                <div class="gf-slider__items">
                    <div class="gf-slider__item">
                    test
                    </div>
                    <div class="gf-slider__item">
                    test
                    </div>
                    <div class="gf-slider__item">
                    test
                    </div>
                    <div class="gf-slider__item">
                    test
                    </div>
                    <div class="gf-slider__item">
                    test
                    </div>
                    <div class="gf-slider__item">
                    test
                    </div>
                    <div class="gf-slider__item">
                    test
                    </div>
                    <div class="gf-slider__item">
                    test
                    </div>
                    <div class="gf-slider__item">
                    test
                    </div>
                </div>
            </div>
            <a href="#" class="gf-slider__next">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><g data-name="Group 42" fill="none" stroke="#222" stroke-width="2"><g transform="rotate(180 20 20)"><circle cx="20" cy="20" r="20" stroke="none"/><circle cx="20" cy="20" r="19"/></g><path data-name="Path 164" d="M17.624 26.846l7-7-7-7"/></g></svg>
            </a>
            </div>

SCSS

.gf-slider-wrap {
    align-items: center;
    display: flex;
    white-space: nowrap;
}

.gf-slider {
    overflow: auto;
    display: flex;
    justify-content: flex-start;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 95%, transparent 100%);

        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        scrollbar-width: none; /* for Firefox */
      
      &::-webkit-scrollbar {
        display: none; /* for Chrome, Safari, and Opera */
      }

    &__items {
        padding: 0 20px 0 0;
    }

    &__prev, &__next {
        display: none;
        padding: 1em;
        svg {
            pointer-events: none;
        }
    }

    &__item {
        display: inline-block;
        padding: 0.8em 0;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        white-space: normal;
        width: 115px;
        vertical-align: top;
    }
}



.scrollDisabled {
    opacity: 0.2;
    pointer-events: none;
}

JavaScript

/* Icon slider */
    var allNext = document.querySelectorAll('.gf-slider__next');
    var allPrev = document.querySelectorAll('.gf-slider__prev');
    var i = '';
    const sliders = document.querySelectorAll('.gf-slider-wrap');

    function checkSliders(){
        for (var i = 0; i < sliders.length; i++) {
            var el = sliders[i];
            arrowHider(el);
            arrowDisabler(el);
        }
    }

    var sliderWindowResize
    window.addEventListener('resize', function(){
        clearTimeout(sliderWindowResize);
        sliderWindowResize = setTimeout(function() {
                checkSliders();
        }, 250);
    });

    function arrowDisabler(el){
        setTimeout(function(){
        var slideItems = el.querySelector('.gf-slider__items'),
            slideContainer = el.querySelector('.gf-slider'),
        slidePrev = el.querySelector('.gf-slider__prev'),
        slideNext = el.querySelector('.gf-slider__next');
        slideNext.classList.remove('scrollDisabled');
        slidePrev.classList.remove('scrollDisabled');
        if ((slideContainer.scrollLeft + slideContainer.offsetWidth) >= slideItems.offsetWidth){
        slideNext.classList.add('scrollDisabled');
        } else if(slideContainer.scrollLeft == 0){
        slidePrev.classList.add('scrollDisabled');
        }
        }, 500);
    }

    function arrowHider(el){
        var slideItems = el.querySelector('.gf-slider__items'),
            slideContainer = el.querySelector('.gf-slider'),
        slidePrev = el.querySelector('.gf-slider__prev'),
        slideNext = el.querySelector('.gf-slider__next');

        
        if(slideItems.offsetWidth > slideContainer.offsetWidth && window.innerWidth > 420) {
            slidePrev.style.display = "block";
            slideNext.style.display = "block";
        } else {
            console.log(slideNext);
            slidePrev.style.display = "none";
            slideNext.style.display = "none";
        }
    }

    checkSliders();


...