index.html

        <div class="images-container">
            <div class="image-slider">
            </div>
        </div>

        <div class="button-container">
            <div class="button previous">&lt;&lt;</div>
            <div class="button play">&#9654
            </div>
            <div class="button stop">&#9608</div>
            <div class="button next">&gt;&gt;</div>
        </div>


        <script type="text/template" class="image-frame">
            <div class="image-display"></div>

        </script>

main.js

'use strict';


var imagesArray = ["https://s3.amazonaws.com/ksr/projects/660047/photo-main.jpg?1397831981", "http://supergiantgames.com/site/wp-content/uploads/Transistor_Wallpaper_1920x1080.jpg", "http://cloud-4.steampowered.com/ugc/615043645846589420/E237625134C7E37487EC553109818982CE3FD0FD/", "http://www.radialgames.com/press/ROCKETSROCKETSROCKETS/images/logo.png", "http://thekoalition.com/images/2013/08/bell.jpg"];



function imageDisplay (images) {
	if ($.isArray(images) && images !== []){	
	  // error checks for array type
		var max = images.length
		// sets the display width of the div to accomodate varying width based on array length
		$('.image-slider').css('width',(max*100)+'%');
  
		images.map(function (x) {
		  // appends the contents of the .image-frame div into the dom for each index of the array (could posisbly be split off)
			$('.image-slider').append($('.image-frame').text());
			// the most recent div will have its background-image changed to the formatted array index
			$('.image-display').last().css('background', 'url(' + x + ') center / cover no-repeat');
		})
	}

	else {
		throw new Error("ImageParse requires a non-empty array as argument");
	}
}


var i = 0;
var interval;
// inter function that calls the animation, but also loops
function intervalManager () {
		interval = setInterval(function () {
		moveLeft();
		i += 1;
		
		if (i == 6) {
		  // when the counter hits the end of the array (in this case) return to one. need to set to index.length instead of '6'
		  // also resets the image slider to the first image
			i=1;
			$('.image-slider').animate({'margin-left': '0px', 'transition': 'none'},10);
		}

	}, 2400);

}
// animate the slider moving left the width of an image
function moveLeft () {
		$('.image-slider').animate({'margin-left': '-=392px'}, 800);	
}

// 'controls' - allows the slider to be stopped, restarted and advanced
$('.stop').click(function () {
	$('.image-slider').stop();
	clearInterval(interval);
})

$('.play').click(function () {
	imageDisplay(imagesArray);
	intervalManager();
})

$('.previous').click(function () {
	clearInterval(interval);
	$('.image-slider').animate({'margin-left': '+=392px'}, 800);
	i -=1;	
	if (i == -1) {
		$('.image-slider').stop();
		$('.image-slider').animate({'margin-left': '-=392px'}, 800);
		i = 1;
	}
	intervalManager();
})

$('.next').click(function () {
	clearInterval(interval);
	$('.image-slider').animate({'margin-left': '-=392px'}, 800);	
	i += 1;
	if (i == 7) {
		$('.image-slider').stop();
		$('.image-slider').animate({'margin-left': '+=392px'}, 800);
		i = 5;
	}
	intervalManager();	
})

main.scss

$icon-font-path: "/bower_components/sass-bootstrap/fonts/";

@import 'sass-bootstrap/lib/bootstrap';

.images-container {
    margin: 30px auto;
    border: 4px solid gray;
    height: 300px;
    width: 400px;
    overflow: hidden;

    & .image-slider {
        display: inline-block;
        width: 300%;
        transition: all 1s linear;
        margin-left: 392px;
        & .image-display {
            height: 292px;
            width: 392px;
            float: left;
            background-repeat: no-repeat;
            background-size: contain;
        }
    }
}

.button-container {
    margin: 0 auto;
    width: 632px;
}

.button {
    margin-top: 60px;
    width: 150px;
    height: 75px;
    background-color: rgb(149, 149, 165);
    border-radius: 8px;
    display: inline-block;
    margin-right: 5px;
    text-align: center;
    line-height: 55px;
    font-weight: bolder;
    color: rgb(232, 30, 30);
    text-shadow: 0px 1px 1px rgb(223, 23, 23);
    font-size: 20px;
    letter-spacing: -.1em;
    box-shadow: inset 0px -12px 0px rgb(130, 130, 147),
                      2px 2px 1px rgb(111, 111, 126);
    transition: all .2s ease;
    padding:.4em;
    vertical-align: bottom;
    cursor: default;
}

.button:hover { 
    height:70px;
    margin-top: 65px;
    box-shadow: inset 0px -8px 0px rgb(130, 130, 147),
                      2px 2px 1px rgb(111, 111, 126);
}

.button:active {
    height: 65px;
    margin-top: 70px;
    box-shadow: inset 0px -4px 0px rgb(130, 130, 147),
                      2px 2px 1px rgb(111, 111, 126);
}