点击功能无法在幻灯片中显示

Question

我正在使jQuery单击Next和Previous span选项卡来控制图像幻灯片，但它不起作用。

function slideshow() {
  var $active = $('div#slider-wrap img.active-img');
  var $next = $active.next();
  $next.addClass('active-img');
  $active.removeClass('active-img');
}

$(function() {
  setInterval(slideshow, 5000);
});

$('#tab-container a').on('click', function() {
  var element = this.id;
  console.log(element);
  $('.images').trigger("slideshow", element);
});
/* next and previous jquery code */
$(document).ready(function() {
  var divs = $('.images>img');
  var now = 0; // currently shown div
  divs.hide().first().show(); // hide all divs except first
  $("#previous").click(function() {
    divs.eq(now).hide();
    now = (now + 1 < divs.length) ? now + 1 : 0;
    divs.eq(now).show(); // show next
  });
  $("#next").click(function() {
    divs.eq(now).hide();
    now = (now > 0) ? now - 1 : divs.length - 1;
    divs.eq(now).show(); // show previous
  });
});

* {
  margin: 0;
  padding: 0;
}
#slider-wrap {
  position: relative;
}
.slideshow .images {
  width: 100%;
  height: 350px;
  overflow: hidden;
  margin: 0 auto;
}
.slideshow .images img {
  position: absolute;
  width: 100%;
  max-width: 960px;
  height: auto;
}
.active-img {
  z-index: 99;
}
#tab-container {
  border-bottom: #ccc 1px solid;
  border-top: #ccc 1px solid;
  overflow: hidden;
  width: 50%;
  margin-top: 265px;
}
#tab-container span {
  display: block;
  float: left;
  width: 42.995%;
  padding: 10px 0;
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  border-right: #ccc 1px solid;
  letter-spacing: 1px;
  font-family: 'corporate_condensed', sans-serif;
}
#tab-container a:nth-of-type(2) span {
  border-right: 0;
}
#tab-container a,
#tab-container a:hover,
#tab-container a:active,
#tab-container a:visited {
  text-decoration: none;
  font-weight: bold;
  color: #000;
  cursor: pointer;
}
#tab-container span:hover {
  color: #fff;
  background: #444;
}
#tab-container span.active {
  color: #fff;
  background: #444;
}
#tab-container a span.active,
.c-slider #tab-container a:hover span.active,
.c-slider #tab-container a:active span.active,
.c-slider #tab-container a:visited span.active {
  color: #fff;
}
#slider_time {
  display: none;
}

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<div id="slider-wrap">
  <div class="slideshow">
    <div class="images">
      <img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/1.jpg" alt="" class="active-img">
      <img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/2.jpg" alt="">
      <img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/3.jpg" alt="">
      <img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/4.jpg" alt="">
    </div>
  </div>
</div>
<div id="tab-container">
  <a><span id="previous" class="">Previous</span></a>
  <a><span id="next"class="">Next</span></a>
</div>
<div style="clear:both"></div>

上一个和下一个标签未正确对齐，宽度相等。我一直都有这个问题。