jquery plugins

jquery plugins

hello i tried running this code using sublime text but is not working.Someone help please!!
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<title>image slider</title>
<script type="text/javascript">
$('#slider').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 3000, 
    next:   '#next', 
    prev:   '#prev' 
});
</script>
<style type="text/css">
#wrapper{
display: block;
height:500px;
width: 800px;
margin: auto; 
}
#container{
overflow: auto;
}
#prev{
background-image: url(dennis/left.png);
background-position: center center;
background-repeat: no-repeat;
height: 500px;
width: 80px;
float: left;
position: relative;
display: block;
z-index: 10;
}
#next{
background-image: url(dennis/left.png);
background-position: center center;
background-repeat: no-repeat;
height: 500px;
width: 80px;
float: right;
position: relative;
display: block;
z-index: 10;
transform: rotate(180deg);
}
#slider{
margin: auto;
display: block;
height: 500px;
width: 800px;
overflow: hidden;
position: absolute;
}   
</style>

</head>
<body>
<div id="wrapper">
<div id ="container">
<div class="controller" id="prev"></div>
<div id="slider">
<img src="dennis/image1.png" height="500px" width="800px">
<img src="dennis/image2.jpg" height="500px" width="800px">
<img src="dennis/image3.jpg" height="500px" width="800px">
<img src="dennis/image4.jpg" height="500px" width="800px">
<img src="dennis/image5.jpg" height="500px" width="800px">
</div>
<div class="controller" id="next"></div>
</div>
</div>
</body>
</html>