スライドショーでクリックしてスライドさせるのですが、実数値を使わないでやりたいです。

クッリクして、スライドさせるのですが、今の所if文で変数＝０と＋＋でクリックごとに加算されるように定義してあるのに対して、３以上になったときに最初のページに戻すようにしてあるのですが、３以上などの実数値は使いたく無いので、.lengthで画像の枚数を取得してるのですが、どのように置き換えれば良いのかわかりません。

// 今回やるのはスライドショーです。
// 右方向には右のボタンを押すと移動し、左方向には左のボタンを押すと移動する。また右端にいる状態で右のボタンを押すと最初の位置に戻り、左端にいる状態で左のボタンを押すと最後の位置に移動する。data属性にprev,nextを記述してあるのでこちらを取得すると楽です。
// 位置情報は配列に格納しておき、右のボタンをクリックするたびに配列の添字を1追加し、左のボタンをクリックすると配列の添字を1減らします。そうすることによって次の座標が取得できます。その座標にアニメーションさせるととても楽です。
// [使用するメソッド]
// .animate({}) cssのプロパティを一定時間かけて変化させます。アニメーションです。
// .data() 要素のdata属性を取得します。
// .width() 要素の幅を取得します。
// .length 要素の個数を取得します。

html
1コード
2<!doctype html>
3<html>
4  <head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7    <meta name="format-detection" content="telephone=no">
8    <title>jQuery</title>
9    <link rel="stylesheet" href="../../common/css/reset.css">
10    <link rel="stylesheet" href="../../common/css/base.css">
11    <link rel="stylesheet" href="./css/style.css">
12  </head>
13  <body>
14    <div class="wrapper">
15      <div class="slider-wrap">
16        <div class="slider-area">
17          <ul class="slider-list clearfix">
18            <li><img src="./img/1.jpg"></li>
19            <li><img src="./img/2.jpg"></li>
20            <li><img src="./img/3.jpg"></li>
21            <li><img src="./img/4.jpg"></li>
22          </ul>
23          <button type="button" class="slider-ctrl-btn is-prev" data-ctrl="prev"></button>
24          <button type="button" class="slider-ctrl-btn is-next" data-ctrl="next"></button>
25        </div>
26      </div>
27    </div>
28    <script src="../../common/js/jquery.js"></script>
29    <script>
30     
31      var click = 3; //clickに０を代入し定義する
32      var sheets = $('.slider-list').find('li').length;
33      console.log(sheets)
34      $('.slider-ctrl-btn').click(function() {
35        var type = $(this).data('ctrl');
36        //click++; //clickを１ずつ増やしていくようにします
37        console.log(type)
38        if(click > sheets) { //if文でclick大なり3と言う式を作り
39          click = 0; //clickが3よりも大きくなった場合、clickを0にするようにしてあります
40        } //ここで一気に最終ページに飛ぶように設定されています
41        type--; //クリックを一つずつ減らして行きます。0から
42        console.log(click)
43        if(click < sheets) { //if文でクリック小なり0とし
44          click = 3; //クリックが0より小さくなった場合、clickを3にするようにしてあります。
45        } //ここで一気に最終ページに飛ぶよう設定されています
46
47        var contentsItem = $('.slider-list').find('li').width();
48        $('.slider-list').animate({ //slider-listがアニメーションする時
49          left: click * (-contentsItem)　//左方向にクリック内の数かける画像の横幅分をズラしてスライドさせます。
50        }, 500); //0.5秒の速度で
51      });
52    </script>
53  </body>
54</html>

css
1コード
2.clearfix:after {
3  display: block;
4  clear: both;
5  content: '';
6}
7.wrapper {
8  padding: 20px;
9}
10.slider-wrap {
11  padding: 10px;
12  margin: 0 auto;
13  width: 620px;
14  border-radius: 0px;
15  background-color: #fff;
16  box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
17}
18.slider-area {
19  position: relative;
20  width: 600px;
21  height: 300px;
22  background-color: #FFF;
23  overflow: hidden;
24}
25.slider-list {
26  position: absolute;
27  top: 0;
28  left: 0;
29  width: 2400px;
30  height: 300px;
31}
32.slider-list > li { float: left; }
33.slider-ctrl-btn {
34  position: absolute;
35  top: 50%;
36  margin-top: -15px;
37  width: 30px;
38  height: 30px;
39  border-radius: 15px;
40  background-color: rgba(255, 255, 255, .8);
41  cursor: pointer;
42}
43.slider-ctrl-btn.is-prev { left: 20px; }
44.slider-ctrl-btn.is-next { right: 20px; }