/* Requires jQuery and jQuery UI

.imageContainer {
  height: 275px;
  width: 1050px;
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.image_reel {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.image_reel img {
  float: left;
}
.paging {
  bottom: 20px;
  right: 20px;
  position: absolute;
  width: auto;
  height: 30px;
  z-index: 0;
  text-align: center;
  line-height: 30px;
  display: none;
  padding: 5px;
}
.paging a {
  font-size: 12px;
  font-style: normal;
  text-decoration: none;
  color: #fff;
  background: 0;
  background-image: url(/img/menuback.png);
  background-repeat: repeat-x;
  background-size: auto 25px;
  padding: 5px;
}
.paging a.active {
  font-weight: 700;
  border: 1px solid #0b1b41;
  background-image: url(/img/btnback.png);
  background-repeat: repeat-x;
  background-size: 100% 100%;
}
<div class="imageContainer">
  <div class="image_reel">
    <a href="http://www.example.com/"><img src="/img/banners/banner1.jpg" /></a>
    <a href="https://www.example2.com"><img src="/img/banners/banner2.jpg" /></a>
    <img src="/img/banners/banner3.jpg" />
  </div>
  <div class="paging">
    <a href="#" rel="1">1</a>
    <a href="#" rel="2">2</a>
    <a href="#" rel="3">3</a>
  </div>
</div>

var rotator = new imageRotator("imageContainer, 7000, 500");
rotator.rotateStart();
*/
var imageRotator = function (contClass, displayLength, aniSpeed) {
  var self = this;
  var timeoutId = null;
  var isAnimating = false;

  this.containerClass = "." + contClass;
  this.imageWidth = $(this.containerClass).width();
  this.imageSum = $(this.containerClass + " > .image_reel img").size();
  this.imageReelWidth = this.imageWidth * this.imageSum;
  this.displayLength = displayLength || 7000; // default to 7 seconds
  this.animationSpeed = aniSpeed || 500; // default to 0.5 seconds
  this.activeImage = null;

  this.rotateStart = function () {
    isAnimating = true;
    MoveNext();
  }
  this.rotateStop = function () {
    isAnimating = false;
    clearTimeout(timeoutId); // Stop the rotation
  }
  function MoveNext() {
    clearTimeout(timeoutId);
    if (isAnimating) {
      timeoutId = setTimeout(function () {
        self.activeImage = $(self.containerClass + " > .paging a.active").next(); // Move to the next paging
        if (self.activeImage.length === 0) { // If paging reaches the end...
          self.activeImage = $(self.containerClass + " > .paging a:first"); // go back to first
        }
        Animate(); // Trigger the paging and slider function
      }, self.displayLength);
    }
  };
  function Animate() {
    var triggerID = self.activeImage.attr("rel") - 1; // Get number of times to slide
    var image_reelPosition = triggerID * self.imageWidth; // Determines the distance the image reel needs to slide

    $(self.containerClass + " > .paging a").removeClass("active"); // Remove all active class
    self.activeImage.addClass("active"); // Add active class (the this.activeImage is declared in the rotateSwitch function)

    // Slider Animation
    $(self.containerClass + " > .image_reel").animate({ left: -image_reelPosition }, self.animationSpeed, 'swing', function () { isAnimating = true; MoveNext(); });
  }

  // Show the paging and activate its first link
  $(this.containerClass + " > .paging a:first").addClass("active");

  // Adjust the image reel to its new size
  $(this.containerClass + " > .image_reel").css({ "width": this.imageReelWidth });

  // On Hover
  $(this.containerClass).hover(function () {
    self.rotateStop(); // Stop the rotation
    $(self.containerClass + " > .paging").show('fade');
  }, function () {
    self.rotateStart(); // Resume rotation timer
    $(self.containerClass + " > .paging").hide('fade');
  });

  // On Click
  $(this.containerClass + " > .paging a").click(function () {
    self.activeImage = $(this); // Activate the clicked paging
    self.rotateStop(); // Stop the rotation
    Animate(); // Trigger rotation immediately
    return false; // Prevent browser jump to link anchor
  });
}