Curseur JQuery avec éléments intérieurs

Question

J'essaye de construire un 'curseur' similaire à celui présenté ici http://ui.jquery.com/repository/real-world/product-slider/ mais j'essaye d'utiliser les divs intérieurs à l'intérieur des éléments de la liste (<li>). il semble que cette démo se casse si vous n'utilisez pas d'élément image ou bloc (<p>, <div>, etc.)

Quelqu'un at-il des solutions rapides à ce problème? Je veux essentiellement utiliser du texte et éventuellement des images à l'intérieur d'un <div> au lieu d'utiliser des images.

J'ai trouvé jCousel qui semble fonctionner, mais je cherchais quelque chose d'un peu plus léger? Des idées?

Answer 1

Je pense que je sorte de avoir un exemple de travail de ce que vous essayez de faire, mais il y a quelques problèmes. En utilisant l'exemple que vous avez publié en tant que base, vous pouvez remplacer le balisage HTML des LI dans un UL par DIV dans un conteneur DIV. Par exemple:

 <div class="sliderGallery"> 
      <div class="div-that-gets-cropped"> 
      <div class="text-and-images-chunk">Some text!<br /><img class="pb-airportexpress" src="slider-gallery_files/pb_airport_express.jpg" /></div> 
      <div class="text-and-images-chunk">Some text!<br /><img src="slider-gallery_files/pb_airport_extreme.jpg" /></div> 
      <div class="text-and-images-chunk">Some text!<br /><img src="slider-gallery_files/pb_timecapsule_20080115.jpg" /></div> 
      ... 
      </div> 

Ensuite, vous modifiez le code jQuery dans la page pour cibler ce conteneur DIV au lieu de l'UL:

window.onload = function() { 
     var container = $('div.sliderGallery'); 
     var divThatGetsCropped = $('div.div-that-gets-cropped', container); 
     var itemsWidth = divThatGetsCropped.innerWidth() - container.outerWidth(); 
     $('.slider', container).slider({ 
      minValue: 0, 
      maxValue: itemsWidth, 
      handle: '.handle', 
      stop: function (event, ui) { 
       divThatGetsCropped.animate({'left' : ui.value * -1}, 500); 
      }, 
      slide: function (event, ui) { 
       divThatGetsCropped.css('left', ui.value * -1); 
      } 
     }); 
    }; 

Ensuite, vous avez des changements CSS non trivial à faire ... L'exemple original reposait sur le fait que les LI étaient affichés: en ligne, à l'intérieur d'un conteneur avec un débordement caché. Cela va être un casse-tête d'essayer d'obtenir tout à montrer correctement si vous style juste ces DIV "text-and-images-chunk" à afficher en ligne. Vous voulez probablement les faire flotter tous.

MAIS, les éléments flottants ne jouent pas très bien avec le conteneur « div-que-obtient-recadrée » DIV à cause de la façon dont il est être « révélé » par la DIV « sliderGallery » (au moins c'est ce que je je vis dans Firefox 3.03). J'eu le temps en réglant une très grande largeur pour le « div qui-obtient-recadrée » DIV (10000 px):

 .sliderGallery div.div-that-gets-cropped { 
      position: absolute; 
      list-style: none; 
      overflow: none; 
     white-space: nowrap; 
     padding: 0; 
      margin: 0; 
      width: 10000px; 
     } 

     .sliderGallery div.div-that-gets-cropped div.text-and-images-chunk { 
     float: left; 
     margin-right: 24px; 
     } 

Et vous aurez à modifier les valeurs de « gauche » pour .slider- lbl1, .slider-lbl2 pour faire correspondre toutes les largeurs (cela peut être difficile si la taille de votre texte finit par changer la largeur des éléments "text-and-images-chunk").

Le seul problème que j'ai remarqué est que lorsque vous avez les images dans un élément de niveau bloc, il n'y a pas de bonne façon de les faire «câliner» le bas, comme dans l'exemple en utilisant inline. Vous pourriez être en mesure de faire fonctionner cela en jouant avec le positionnement des éléments (je ne pouvais pas), mais j'espère que cela ne sera pas un gros problème dans votre utilisation spécifique. Tout cela dit, jCousous semble être destiné exactement à ce que vous faites, même si cela ajoute un peu de code en masse.

Answer 2

Découvrez le plugin jCousel Lite. Je l'ai trouvé très utile et facile à configurer.

http://www.gmarwaha.com/jquery/jcarousellite/index.php?#demo