重叠滑块标题问题

Question

我从头开始构建了这个滑块/推子/旋转木马，点的可点击性实现得很好，但是，当你选择一个特定的图像时，由于滑块的功能仍在实现和运行，每个图像的标题都会溢出。有没有一种方法可以在用户单击特定的点时停止或暂停函数，持续一段特定的时间，然后重新开始运行它？有没有其他方法可以隐藏未激活的字幕？我尝试了几种不同的方法，但都不能正常工作。代码如下：

​

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

        }
    });
});  

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

<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>

​