Slider click précédent

**roxunoob** · 18/12/2014, 17h43

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**danielhagnoul** · 18/12/2014, 20h32

Ici this c'est la division ayant la classe "nav" !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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( event )
	{
		if( $( event.target ).hasClass('next') ){
			position++;
			if( position > images_length ){
				position = 0;
			}
		}else
		{position--;
			if( position < 0 ){
				position = images_length;
			}
		};
 
		$('.slider img').attr('src',"img/" + images[position]);
	});
 
 
});

Slider click précédent

jQuery

Vue hybride

Discussions similaires

Partager

Partager