Créer une function photo slider
Bonjour tout le monde !
J’ai un problème avec une function de défilement photo que j’essaies actuellement de crée.Je crois que c’est un problème de structure, car il est fonctionnel mais après quelques cliques pour défilé les images, il fait littéralement ‘’bugger’’ mon navigateur.
Voici ce que j’ai de fait du coté Jquery :
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
| (function( $ ){
/* AUTRE FUNCTION … ****/
/* Déroulement Photo ****/
$.fn.photoScroll = function(options) {
var config = { leftArrow : '#leftArrow',
rightArrow : '#rightArrow',
photoSlider : '#photoSlider',
photoUL : '#photoUL',
scrollWidth : 150,
scrollSpeed : 300 }
if (options){ $.extend(config, options); }
$(config.leftArrow).on({'click': function() {
var pos = ($(config.photoSlider).scrollLeft())?(Math.round(($(config.photoSlider).scrollLeft()/config.scrollWidth))*config.scrollWidth):0;
$(config.photoSlider).stop(true,true).animate({scrollLeft:( pos - config.scrollWidth)+'px'}, config.scrollSpeed);
}
});
$(config.rightArrow).on({'click': function() {
var pos = ($(config.photoSlider).scrollLeft())?(Math.round(($(config.photoSlider).scrollLeft()/config.scrollWidth))*config.scrollWidth):0;
$(config.photoSlider).stop().animate({scrollLeft: (pos+config.scrollWidth)+'px'}, config.scrollSpeed);
}
});
}
})( jQuery ); |
Voici ce que ressemble mon code html (je vous épargne le CSS) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div id="photoToScroll" style="width:100%;">
<div id="leftArrow"> </div>
<div id="rightArrow" style=" margin-right:0px;"> </div>
<div id="center">
<div id= « photoSlider" >
<ul class="photoUL" id="photoUL">
<!—BEGIN-LOOP image -->
<li >PHOTO</li>
<!—END-LOOP image -->
</ul>
</div>
</div>
</div> |
Est-ce que je m’y prends de la bonne façon ? sinon, quel serait la meilleur façon ?
Merci d’avance
