So blenden Sie Schaltflächen auf dem Bild-Schieberegler am Anfang und am Ende des Arrays aus

Question

Ich habe zwei Schaltflächen, die, wenn sie durch einen Bild-Schieberegler bewegt werden, #prevtBtn und #nextBtn sind.

Könnte mir jemand helfen, eine if-Anweisung hinzuzufügen, um zu überprüfen, ob das angezeigte Bild am Anfang des Arrays steht und dann prevtBtn ausblendet und dann prüft, ob das Array am Ende ist und die nextBtn ausblendet .

Siehe unten für 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

ich tun würde, so etwas wie:

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); 
 
}

Hoffe, es hilft!