Ошибки при попытке создать эффект карусели

Question

Я пытаюсь создать эффект карусели для своего сайта, но у меня возникают проблемы. Мой код выглядит следующим образом, но когда я пытаюсь нажать на одну из кнопок, я получаю сообщение об ошибке

Uncaught ReferenceError: slide is not defined
at HTMLButtonElement.onclick (index.html:22)

function slide(dir){
	var item_width = $('#carousel_ul li').width();
	if(dir == 'left'){
		var original_indent = $('#carousel_ul').css('left');
		var new_indent = parseInt(original_indent) + item_width;
		$('#carousel_ul').css('left': new_indent);
	}else if(dir == 'right'){
		var original_indent = $('#carousel_ul').css('left');
		var new_indent = parseInt(original_indent) - item_width;
		$('#carousel_ul').css('left': new_indent);
	}
}

#carousel_inner{
	float:left;
	width:600px;
	overflow:hidden;
}
#carousel_ul{
	position:relative;
	left:-200px;
	list-style:none;
	margin:0px;
	padding:0px;
	width:9999px;
}
#carousel_ul li{
	float:left;
	width:200px;
	padding:0px;
	height:200px;
	background:transparent;
	margin:0px;
}
#left_scroll,#right_scroll{
	float:left;
	margin-left:5px;
	margin-right:5px;
	height:150px;
	width:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="carousel_container">
	<div id="left_scroll"><button onclick="slide('left');">prev</button></div>
	<div id="carousel_inner">
		<ul id="carousel_ul">
			<li><img src="http://via.placeholder.com/150x150"></li>
			<li><img src="http://via.placeholder.com/150x150"></li>
			<li><img src="http://via.placeholder.com/150x150"></li>
			<li><img src="http://via.placeholder.com/150x150"></li>
			<li><img src="http://via.placeholder.com/150x150"></li>
			<li><img src="http://via.placeholder.com/150x150"></li>
			<li><img src="http://via.placeholder.com/150x150"></li>
			<li><img src="http://via.placeholder.com/150x150"></li>
			<li><img src="http://via.placeholder.com/150x150"></li>
			<li><img src="http://via.placeholder.com/150x150"></li>
		</ul>
	</div>
	<div id="right_scroll"><button onclick="slide('right');">next</button></div>
</div>

Я надеялся также попытаться включить это в бесконечный цикл и не знал, как это сделать.

Я думал что-то вроде:

$('#carousel_ul li:first').after($('#carousel_ul li:last'));
$('#carousel_ul li:last').before($('#carousel_ul li:first'));

Любая помощь или предложения для этого будет принята с благодарностью.

Я знаю, что есть множество различных готовых каруселей, но я хочу попытаться выяснить это сам.

Answer 1

Обновленный файл JS, включающий бесконечный цикл:

function slide(dir){
    var item_width = $('#carousel_ul li').outerWidth();
    if(dir == 'left'){
        var original_indent = $('#carousel_ul').css('left');
        var new_indent = parseInt(original_indent) + item_width;
        $('#carousel_ul li:first').before($('#carousel_ul li:last'));
    }else if(dir == 'right'){
        var original_indent = $('#carousel_ul').css('left');
        var new_indent = parseInt(original_indent) - item_width;
        $('#carousel_ul li:last').after($('#carousel_ul li:first'));
    }
}