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 : 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
(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 html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="photoToScroll" style="width:100%;">
  <div id="leftArrow">&nbsp;</div>
  <div id="rightArrow" style="  margin-right:0px;">&nbsp;</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