jQuery 画像を自動ループさせたいです。

###jQuery 画像を自動ループさせたいです。
プラグインを使わずに画像を自動でループさせたいです。
自分でやってみたのですが、上手くいかずに質問させていただきました。
お答え頂ければ幸いです。

###該当のソースコード

javascript
1$(function() {
2
3    var last_page = $('.slide').length - 1;           
4
5  $('.index-btn').click(function() {                  
6    $('.active').removeClass('active');               
7    var indexNumber = $('.index-btn').index($(this)); 
8    $('.slide').eq(indexNumber).addClass('active');   
9    $('.index-btn').removeClass('active_btn');        
10    $(this).addClass('active_btn');                   
11  });
12
13  $('.change-btn').click(function() {              
14    var x = $('.active_btn').index();              
15    if ($(this).hasClass('next-btn')) {            
16      x++;                                         
17    } else {                                      
18      x--;                                        
19    }
20    if ( x > last_page ) {                        
21    	x = 0;                                       
22    }
23    if ( 0 > x ) {                                 
24    	x = last_page;                               
25    }
26    $('.index-btn').eq(x).click();                 
27  });
28});

###以下が使用しているhtml,cssです。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <title>Progate</title>
7    <link rel="stylesheet" href="style.css">
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
9</head>
10<body>
11    <div class="slide-wrapper">
12        <div class="change-btn-wrapper">
13            <div class="change-btn prev-btn">← </div>
14            <div class="change-btn next-btn"> →</div>
15        </div>
16        <ul class="slides">
17            <li class="slide active"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"></li>
18            <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/rainy.jpg"></li>
19            <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/summer.jpg"></li>
20            <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/autumn.jpg"></li>
21            <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/winter.jpg"></li>
22        </ul>
23        <div class="index-btn-wrapper">
24            <div class="index-btn active_btn">1</div>
25            <div class="index-btn">2</div>
26            <div class="index-btn">3</div>
27            <div class="index-btn">4</div>
28            <div class="index-btn">5</div>
29        </div>
30    </div>
31    <script type="text/javascript" src="common.js"></script>
32</body>
33
34</html>
35
36

css
1body {
2    font-family: "Hiragino Maru Gothic ProN", sans-serif;
3}
4ul {
5    list-style: none;
6}
7.slide-wrapper {
8    text-align: center;
9    width: 1000px;
10    margin: 0 auto;
11    color: #5e6f84;
12    padding: 60px 0;
13}
14.change-btn-wrapper {
15    width: 500px;
16    margin: 20px auto;
17    font-size: 18px;
18}
19.change-btn-wrapper:after {
20    content: "";
21    clear: both;
22    display: block;
23}
24.prev-btn {
25    cursor: pointer;
26    float: left;
27    /*display: none;*/
28}
29.next-btn {
30    cursor: pointer;
31    float: right;
32}
33.slides {
34    padding: 0;
35}
36.slide {
37    display: none;
38}
39.active {
40    display: block;
41}
42.slide img {
43    width: 500px;
44    height: auto;
45    border-radius: 5px;
46}
47.index-btn-wrapper {
48    font-size: 16px;
49    margin-top: 20px;
50}
51.index-btn {
52    display: inline-block;
53    color: #4e90af;
54    background-color: #e0f5ff;
55    width: 40px;
56    padding: 6px 0;
57    margin: 0 5px;
58    border-radius: 3px;
59    cursor: pointer;
60}
61.index-btn:hover {
62    color: #fff;
63    background-color: #5cabd0;
64}
65.active_btn {
66    color: #fff;
67    background-color: #5cabd0;
68}
69
70