Slider horizontal JQuery

**JimPear** · 11/08/2014, 19h57

Bonjour à tous !

J'ai essayé de reprendre un script présent ici : http://jsfiddle.net/Lcmuk/18/ C'est un script permettant de faire défiler horizontalement des photos.
Le rendu sur jsfiddle est exactement ce que je voudrais, cependant lorsque je l'inclus dans un fichier tout bête pour tester cela ne marche pas et étant débutant en Jquery j'aurais besoin d'aide pour comprendre notamment le comportement de la fonction move() déclarée. J'ai vainement essayé de faire des modifications mais je n'obtiens jamais le bon résultat. Les images ne défilent pas en boucle ou alors elles défilent dans des séquences désordonnées, bref j'ai besoin d'un oeil avisé et d'une personne plus érudite pour me débloquer dans ce tout petit script que j'aimerais comprendre et assimiler

Bonne fin de journée !

**Michelk12** · 12/08/2014, 09h44

Hello JimPear,

Que donne ce code de ton côté?

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
 
 
   <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
 
 
<style>
*, body, button, input, textarea, select {
  text-rendering: optimizeLegibility;
  font-size:100%;
}
 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
  margin:0;
  padding:0;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
fieldset,img { 
  border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
  font-style:normal;
  font-weight:normal;
}
ol,ul {
  list-style:none;
}
caption,th {
  text-align:left;
}
h1,h2,h3,h4,h5,h6 {
  font-size:100%;
  font-weight:normal;
}
q:before,q:after {
  content:'';
}
abbr,acronym { border:0;}
</style>
 
<style type='text/css'>
#slider_test {
    overflow: hidden;
    width: 500px;
}
 
#slider_test #content {
    position: relative;
    width: 10000px;
}
 
#slider_test #content div {
    float: left;
}
 </style>
 
 
 
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function() {
var pixel = 2;
var interval = 100;
 
var $slider = $("#slider_test");
var $slider_content = $slider.find("#content");
var $content_defil = $slider_content .find("#defil");
 
var ref = 0;
function move() {
    $slider_content.css('left', ($slider_content.offset().left - pixel) +"px");
    ref += pixel;
 
    var $first_child = $slider_content.find('>:first-child');
    if($first_child.width() < ref) {
        $first_child.appendTo($slider_content);
        $slider_content.css('left', $slider.offset().left +"px");
        ref = 0;
    }
}
 
var action = setInterval(move, interval);
 
$("#slider_test #content").mouseout(function() {
    action = setInterval(move, interval);
});
 
$("#slider_test #content").mouseover(function() {
    clearTimeout(action);
});
 
});
 
});//]]>  
 
</script>
 
 
</head>
<body>
  <div id="slider_test">
    <div id="defil">
        <div id="content">
            <div><img src="http://www.devtrix.net/sliderman/demos/demo_4/img/01.jpg" /></div>
            <div><img src="http://www.devtrix.net/sliderman/demos/demo_4/img/02.jpg" /></div>
            <div><img src="http://www.devtrix.net/sliderman/demos/demo_4/img/03.jpg" /></div>
            <div><img src="http://www.devtrix.net/sliderman/demos/demo_4/img/04.jpg" /></div>
        </div>
    </div>
</div>
 
</body>
</html>

**JimPear** · 12/08/2014, 13h20

Merci ! Ca a l'air de fonctionner exactement comme je voulais !

EDIT : en fait il manquait seulement le $(window).load() c'est ça? Erreur de vrai débutant donc

Slider horizontal JQuery

jQuery

Vue hybride

Discussions similaires

Partager

Partager