I’ve been working on implementing a carousel effect for my website, but I’m encountering some issues. When I attempt to click on one of the buttons, an error message pops up:
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>I was also hoping to set this up as an infinite loop, but finding it challenging. Here’s what I have in mind:
$('#carousel_ul li:first').after($('#carousel_ul li:last'));
$('#carousel_ul li:last').before($('#carousel_ul li:first'));
Even though there are many ready-made carousels available, I prefer trying to solve this on my own.