Slider click précédent

Bonjour a tous, j'ai un petit soucis dans mon code jquery, car lorsque je click sur l'image qui doit faire défiler les images en arrières, les images défilent vers l'avant voici mon code..
Si vous pouviez m'aider a voir sa serai gentil..merci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$( document ).ready(function() {
	var images = ['Coper.jpg','Cornish.jpg', 'Deniro.jpg', 'Howard.jpg' ];
	var images_length = images.length - 1;
	var position = 0;
		$( ".nav" ).click(function()
	{
		if( $(this).hasClass('next') ){
			position++;
			if( position > images_length ){
				position = 0;
			}
		}else
		{position--;
			if( position < 0 ){
				position = images_length;
			}
		};
 
		$('.slider img').attr('src',"img/" + images[position]);
	});
 
 
});

Et voici mon code html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
    <style>
      #cooper{
        position:absolute;
      }
      #cornish{
        position:absolute;
      }
      #deniro{
        position:absolute;
      }
      #howard{
        position:absolute;
      }
 
    </style>
  </head>
  <body>
    <div class="container">
      <div class="galerie">
        <div class="slider">
         <img src="img/Coper.jpg" alt="">
        <p> </p>
        </div>
        <div id="nav" class="nav">
          <img src="img/suiv.png" class="next">
          <img src="img/prec.png" class="prev">
        </div>
      </div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/scripts.js"></script>
  </body>
 
</html>