How to fade out buttons on image slider at start and end of array

Question

I have two buttons that when clicked move through an image slider, they are #prevtBtn and #nextBtn .

Could anyone give me some help with adding an if statement to check if the image being displayed is at the start of the array and then fading out the prevtBtn and then checking if the array is at the end and fading out the nextBtn .

See below for code.

TweenLite.set('.image_container',{perspective:700});

var slides = document.querySelectorAll('.slide'),
    tl = new TimelineLite({
        paused:true
    }),
    i, l;

for(i=0, l=slides.length ; i<l; i++) {
    var D = document.createElement('div');

    D.className = 'Dot';
    D.id = 'Dot' + i;

    D.addEventListener('click', function(){
        tl.seek(this.id).pause();
    });

    document.getElementById('Dots').appendChild(D);

    if(i!=0) {
        tl.addPause('Dot'+i);
    };

    if(i!=slides.length-1) {
        tl
            .to(slides[i], 0.5, {
                scale: .8,
                ease: Back.easeOut
            })
            .to(slides[i], 0.7, {
                xPercent: -100,
                rotationY: 80
            }, 'L' + i) 
            .from(slides[i+1], 0.7, {
                xPercent: 100,
                rotationY: -80
            }, 'L' + i)
            .to('#Dot' + i, 0.7, {
                backgroundColor: 'rgba(102,255,0,1)'
            }, 'L' + i)
            .from(slides[i+1], 0.5, {
                scale: .8,
                ease: Back.easeIn
            });
    } 
};

function GO(e){
    var SD = isNaN(e) ? (e.wheelDelta || -e.detail) : e;

    if(SD<0) {
        tl.play()
    } else {
        tl.reverse()
    };
};

document.getElementById('nextBtn').addEventListener("click", function() {
    GO(-1);
});
document.getElementById('prevtBtn').addEventListener("click", function() {
    GO(1)
});

Answer 1

I would do something like:

 if (slides[0].offsetParent === null) { fade(document.getElementById('prevBtn'); } if (slides[lis.length-1].offsetParent === null) { fade(document.getElementById('nextBtn')); } function fade(element) { var op = 1; // initial opacity var timer = setInterval(function () { if (op <= 0.1){ clearInterval(timer); element.style.display = 'none'; } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op -= op * 0.1; }, 50); } 

Hope it helps!