I built this slider/fader/carousel from scratch and the clickability of the dots is implemented fine, however, the captions for each image bleed through when you select a specific image due to the fact the function for the slider is still being implemented and running. Is there a way to stop or pause the function when the user clicks a specific dot, for a specific period of time, then start running it again? Is there another way to hide the captions that aren't active? I have tried a few different methods, but nothing works properly. Here is the code:

```js
function cycleImages() {
  var $active = $('.image.active');
  var $next = $active.next().length > 0 ? $active.next() : $('.image:first'); 
  $active.animate({ 
    opacity:'0'
  },400,function(){
    $active.removeClass('active')
    $next.animate({ 
      opacity:'1'
    },400,function(){ 
      $next.addClass('active');
    }) 
  });
}

$(document).ready(function(){

    setInterval('cycleImages()', 7000);

    $(".fader, .dots.one").on("click", function(){
     if($(this).hasClass("one")) {
        $(".dots.one").toggleClass('dot-active');
        $(".dots.two, .three, .four, .five").removeClass('dot-active');
        $(".image, .img-1").siblings(".img-2, .img-3, .img-4, .img-5").css("opacity", "0");
        $(".img-1, .caption").css("opacity", "1");

        }
    });
    $(".fader, .dots.two").on("click", function(){
     if($(this).hasClass("two")) {
        $(".dots.two").toggleClass('dot-active');
        $(".dots.one, .three, .four, .five").removeClass('dot-active');
        $(".image, .img-2").siblings(".img-1, .img-3, .img-4, .img-5").css("opacity", "0");
        $(".img-2, .caption").css("opacity", "1");

        }
    });
    $(".fader, .dots.three").on("click", function(){
     if($(this).hasClass("three")) {
        $(".dots.three").toggleClass('dot-active');
        $(".dots.one, .two, .four, .five").removeClass('dot-active');
        $(".image, .img-3").siblings(".img-1, .img-2, .img-4, .img-5").css("opacity", "0");
        $(".img-3, .cp-3").css("opacity", "1");

        }
    });
    $(".fader, .dots.four").on("click", function(){
     if($(this).hasClass("four")) {
        $(".dots.four").toggleClass('dot-active');
        $(".dots.one, .two, .three, .five").removeClass('dot-active');
        $(".image, .img-4").siblings(".img-1, .img-2, .img-3, .img-5").css("opacity", "0");
        $(".img-4, .cp-4").css("opacity", "1");

        }
    });
    $(".fader, .dots.five").on("click", function(){
     if($(this).hasClass("five")) {
        $(".dots.five").toggleClass('dot-active');
        $(".dots.one, .two, .three, .four").removeClass('dot-active');
        $(".image, .img-5").siblings(".img-1, .img-2, .img-3, .img-4").css("opacity", "0");
        $(".img-5, .cp-5").css("opacity", "1");

        }
    });
});  
```

```css
div.image div.caption {
  display: visible;
  position: absolute;
  overflow: hidden;
  z-index: 20;
  color: white;
  background-color: rgba(0,0,0,0.3);
  height: 10%;
  width: 99.5%;
  bottom: 0;
  font-family: arial;
  font-size: 10pt;
  padding: 0.5em;
}
.fader {
  height: 40vw;
}

.fader div.image img {
  margin-left: -4.25em;
}
.fader {
  border-radius: 1em;
  height: 25vw;
  width: 74vw;
  max-height: 100%;
  min-height: 10vw;
  margin: 0 auto;
  border-left: 1.5em solid #aa917d;
  border-right: 1.5em solid #aa917d;
  position: relative;
  overflow: hidden;
}
.fader div.image img {
  display: block;
  width: 100%;
  margin: 0 auto;
  z-index: 1;
  position: absolute;
}

div.image img {
  z-index: 5;
}

div.image{
  opacity:0;
  transition:all 1s ease-in;
}

div.image.active{
  opacity:1;
}

.dots {
  float: right;
  background-color: rgba(255,255,255,100);
  border: none;
  border-radius: .85vw;
  display: inline-block;
  height: .85vw;
  width: .85vw;
  margin: .2em .2em .2em .2em;
}

.dots.active {
  background-color: #aa917d;
}

.dot-container button {
 padding: 0px;
}
.dot-container {
  float: right;
  margin-right: .5em
}
.dot-active {
 background-color: #766557;
}

button {
  font-family: arial;
  color: white;
  cursor: pointer;
  border: none;
  background: none;
  padding-left: 0px;

}

button:focus {
  outline: 0;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="fader">
   <div class="image img-1 active">
    <img class="" src="http://media.istockphoto.com/vectors/watercolor-blue-banner-vector-id520176256?s=2048x2048" alt="" style="height: 100%; width:auto; object-fit: fill">
    <div class="caption">
     <span class="image-info cp-1 active"><a>Harvard Law School - Cambridge, MA</a></span>
     <div class="dot-container">
      <button><span class="dots five"></span></button>
      <button><span class="dots four"></span></button>
      <button><span class="dots three"></span></button>
      <button><span class="dots two"></span></button>
      <button><span class="dots one active"></span></button>
     </div> 
    </div>
   </div>
   <div class="image img-2"> 
    <img class="" src="http://media.istockphoto.com/illustrations/turquoise-and-chartreuse-mottled-background-with-dotted-pattern-illustration-id505491352?s=2048x2048" alt="" style="height: 100%; width:auto; object-fit: fill">
    <div class="caption">
     <span class="image-info cp-2"><a>Battery Wharf - Boston, MA</a></span>
     <div class="dot-container">
      <button><span class="dots five"></span></button>
      <button><span class="dots four"></span></button>
      <button><span class="dots three"></span></button>
      <button><span class="dots two active"></span></button>
      <button><span class="dots one"></span></button>
     </div> 
    </div>
   </div>
   <div class="image img-3"> 
    <img class="" src="http://media.istockphoto.com/illustrations/blank-abstract-light-blue-watercolor-background-illustration-id499570852?s=2048x2048" alt="" style="height: 100%; width:auto; object-fit: fill">
    <div class="caption">
     <span class="image-info cp-3"><a>Back Bay Hotel - Boston, MA</a></span>
     <div class="dot-container">
      <button><span class="dots five"></span></button>
      <button><span class="dots four"></span></button>
      <button><span class="dots three active"></span></button>
      <button><span class="dots two"></span></button>
      <button><span class="dots one"></span></button>
     </div> 
    </div>
   </div>
   <div class="image img-4"> 
    <img lass="" src="http://media.istockphoto.com/illustrations/gold-glitter-painted-background-illustration-id512988164?s=2048x2048" alt="" style="height: 100%; width:auto; object-fit: fill">
    <div class="caption">
     <span class="image-info cp-4"><a>Ashmont MBTA Station - Dorchester, MA</a></span>
     <div class="dot-container">
      <button><span class="dots five"></span></button>
      <button><span class="dots four active"></span></button>
      <button><span class="dots three"></span></button>
      <button><span class="dots two"></span></button>
      <button><span class="dots one"></span></button>
     </div>
    </div>
   </div>
   <div class="image img-5"> 
    <img class="" src="http://media.istockphoto.com/illustrations/pink-orange-backgrounds-watercolor-painting-abstract-illustration-id514635080?s=2048x2048" alt="" style="height: 100%; width:auto; object-fit: fill">
    <div class="caption">
     <span class="image-info cp-5"><a>----------</a></span>
     <div class="dot-container">
      <button><span class="dots five active"></span></button>
      <button><span class="dots four"></span></button>
      <button><span class="dots three"></span></button>
      <button><span class="dots two"></span></button>
      <button><span class="dots one"></span></button>
     </div> 
    </div>
   </div> 
  </div>
```