title: How to fade out buttons on image slider at start and end of array
body: <p>I have two buttons that when clicked move through an image slider, they are <code>#prevtBtn</code> and <code>#nextBtn</code>.</p>
  
  <p>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 <code>prevtBtn</code> and then checking if the array is at the end and fading out the <code>nextBtn</code>.</p>
  
  <p>See below for code.</p>
  
  <pre class="lang-js prettyprint-override"><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&lt;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&lt;0) {
          tl.play()
      } else {
          tl.reverse()
      };
  };
  
  document.getElementById('nextBtn').addEventListener("click", function() {
      GO(-1);
  });
  document.getElementById('prevtBtn').addEventListener("click", function() {
      GO(1)
  });
  </code></pre>