Jquery Carousel - versuchen, benutzerdefinierte Bildlaufleiste

Question

Ich habe versucht, online suchen und durchsucht die relevanten "beantwortet" Fragen hier, aber nichts scheint zu meinem Problem ziemlich passen, so dass ich hoffe, jemand weiß die Antwort darauf.

Ich habe eine Website, die ich codiere http://2938.sandbox.i3dthemes.net/index.html und ich habe das Karussell (CarouFredsel) funktioniert perfekt; Ich möchte jedoch eine Bildlaufleiste ähnlich der hier verwendeten hinzufügen http://finnrudolph.de/ImageFlow.

Ich habe die Bilder, um die Bildlaufleiste zu machen, aber ich bin ein Noob, wenn es um Jquery geht. Ich habe einige Informationen zum Hinzufügen einer jQuery-Bildlaufleiste zu Inhalts-Divs gefunden, aber sie verlangten, dass die Divs absolut sind. Damit mein Karussell funktioniert, muss es relativ sein.

Was möchte ich tun?

Ich schätze jede Hilfe, die ich dabei bekommen kann.

Vielen Dank im Voraus.

P.S. Ich habe versucht, den Code in JSfiddle zu verwenden, aber war nicht erfolgreich, also stellte ich stattdessen einen Link zur Sandbox zur Verfügung. Hier

ist das Skript in der Kopfzeile:

 <script type="text/javascript" language="javascript"> 
     $(function() { 

     $("#foo3").carouFredSel({ 
      items : 2, 
      auto: { 
       duration: 750 
       }, 
      scroll : { 
       items: 1, 
       duration: 750, 
      onAfter: function() { 
    if ($(this).triggerHandler("currentPosition") == 0) { 
    $(this).trigger("pause"); 
    } 
}}, 
     }).parent().css("margin", "auto"); 
     }); 

    </script> 

Und hier ist der HTML-Code für das Karussell:

<div class="list_carousel"> 
    <ul id="foo3"> 
<li style="width:486px"><img src="Images/SMP-3.jpg" alt="Testing description" /></li> 
<li style="width:486px"><img src="Images/SMP-6.jpg" alt="Text_2" /></li> 
<li style="width:238px"><img src="Images/SMP-4.jpg" alt="Text_6" /></li> 
<li style="width:486px"><img src="Images/SMP-2.jpg" alt="Text_3" /></li> 
<li style="width:238px"><img src="Images/SMP-5.jpg" alt="new description" /></li> </ul> 
<div class="clearfix"></div> 
</div> 

EDIT:

Ich glaube, es ist möglich, mit dem Einsatz von das Mausrad-Plug-in, das einfach genug ist. Mein ursprüngliches Problem war (und ist immer noch), wie das Bild der Bildlaufleiste angezeigt wird, das mit der Mausrad-Bildlauffunktion verwendet werden kann. Die Bilder bestehen aus der Linie für den Balken und dem Navigationskreis, der sich entlang des Balkens bewegt.

Answer 1

Warum lesen Sie diese Bildergalerie-Dokumentation nicht, anstatt zu suchen?

http://finnrudolph.de/ImageFlow/Documentation