Sujet Précédent Sujet Suivant

Jquery > Problème de loop ou calcul trop lourd

deuxk Messages postés 1 Date d'inscription jeudi 14 novembre 2013 Statut Membre Dernière intervention 14 novembre 2013 - Modifié par deuxk le 14/11/2013 à 16:26
cs_AlexN Messages postés 694 Date d'inscription lundi 5 décembre 2005 Statut Membre Dernière intervention 8 janvier 2014 - 29 nov. 2013 à 14:36
Bonjour,

J'essaie de crée une function en jquery. Cette fonction servirais a faire défilé des photos de droite a gauche (avec overflow hidden).

Mon problème est le suivant :

- Les touches gauches/droites fonctionnes, mais après quelque clique vers la droite/gauche mon curseur ce transforme en curseur de ''loading'' et le navigateur ferme.

- Je n'ai aucun message d'erreur dans la console.

- Cela marchais bien avant que j'essaie de transformer mon code en function.

Voici la parti Jquery : 
(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 la parti html : 
<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>


Le CSS n'est pas la, je vous l'épargne.
Si vous avez besoin de quoi que ce sois de plus, faites moi signe!

Je vous remercie d'avance!
Deuxk

1 réponse

Réponse 1 / 1
cs_AlexN Messages postés 694 Date d'inscription lundi 5 décembre 2005 Statut Membre Dernière intervention 8 janvier 2014 19
29 nov. 2013 à 14:36
Bonjour,

Ce que vous cherchez à faire ressemble à des carrousels des photos.
Pourquoi ne pas utiliser un module déjà fabriqué, comme :
- http://sorgalla.com/jcarousel/
- http://caroufredsel.dev7studios.com/
- http://wowslider.com/fr/jquery-slider-carousel-mac-stack-demo.html
- http://www.megaptery.com/2013/07/owlcarousel-carousel-jquery-responsive-multi-fonctions.html

ou celui des jQeuryTools : http://jquerytools.org/demos/scrollable/index.html

--
1

Discussions similaires

Requete avec un loop
cs_Rouk -
Rouk -

2 réponses
DIAPORAMA ALÉATOIRE AVEC TIMER
seufseuf -
neigedhiver -

31 réponses
jquery nombre d'options d'un select
Raul duke -
Raul duke -

1 réponse
[JQuery]Datatable problème avec la création de bouton
EnguerrandP -
EnguerrandP -

15 réponses
intégrer mon slider jquery à ma page et le faire tourner en boucle
lallanana87 -
BencoAndCo -

2 réponses
Rejoignez-nous