実数値を使わずに.lengthや.widthで完成させたい

今掲載してあるコードで動くには、動くのですが実数値を使わないで、動作させたいです。

動きとしては、右にクリックしていくと、画像が横幅分スライドするようになっています。
左クリックしても同じことが言えます。
枚数分クリック終えると、最初の画像に戻るようになっています。

今回は、eft: click * -600というところを、left: click * (-imgWidth) という風にしたいです。

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-ctrldata="next"></button>
25        </div>
26      </div>
27    </div>
28    <script src="../../common/js/jquery.js"></script>
29    <script>
30      var click = 0;
31
32      $('.slider-ctrl-btn').click(function() {
33        var type = $(this).data('ctrl');
34        type++; //clickを１ずつ増やしていくようにします
35        console.log(type)
36        if(click > 3) { //if文でclick大なり3と言う式を作り
37          click = 0; //clickが3よりも大きくなった場合、clickを0にするようにしてあります
38        } //ここで一気に最終ページに飛ぶように設定されています
39        type--; //クリックを一つずつ減らして行きます。0から
40        console.log(click)
41        if(click < 0) { //if文でクリック小なり0とし
42          click = 3; //クリックが0より小さくなった場合、clickを3にするようにしてあります。
43        } //ここで一気に最終ページに飛ぶよう設定されています
44
45        $('.slider-list').animate({ //slider-listがアニメーションする時
46          left: click * -600　//左方向にクリック内の数かける画像の横幅分をズラしてスライドさせます。
47        }, 500); //0.5秒の速度で
48      });
49    </script>
50  </body>
51</html>

  // [使用するメソッド]
  // .animate({}) cssのプロパティを一定時間かけて変化させます。アニメーションです。
  // .data() 要素のdata属性を取得します。
  // .width() 要素の幅を取得します。
  // .length 要素の個数を取得します。

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; }