jQueryのスライダー問題

Question

私はjQueryのに非常に新しいですので、私はこのtutorialに従うことをしようとしたが、後で自分自身にそれを調整しようとしました。しかし、私はあまり成功していません。 まず、同じスライダーを同じページに複数回表示します。最初のスライダは正しく動作しますが、他のスライダは動作しません。 スクロールすると少しだけ続きますので、画像の代わりに背景を表示します。あなたがしたい場合は、サイトではなく、ここにit's 生きるSEに、私はその場合は、CSSの問題を知らない：S

HERESにhtmlコード：

div id="sliderTab1">       
     <div class="scroll-pane"> 
      <div class="scroll-content"> 
       <?php include("designRetouch.php")?> 
      </div> 
      <div class="scroll-bar-wrap"> 
       <div class="scroll-bar"></div> 
      </div> 
     </div>  
    </div> 

と3回以上。

HERESにjQueryのスライダースクロールバーのとどのように出て、それをテストしてスライダを

 function sizeScrollbar(){ 
     var remainder = scrollContent.width() - scrollPane.width(); 
     var proportion = remainder/scrollContent.width(); 
     var handleSize = scrollPane.width() - (proportion * scrollPane.width()); 

     scrollbar.find(".ui-slider-handle").css({ 
      width : handleSize, 
      "margin-left":-handleSize/2, 
     }); 
     handleHelper.width("").width(scrollbar.width() - handleSize); 
    } 

と...

$("#tab1").click(function(){ 
     $('li[id^="tab"]').removeClass('current'); 
      $("#tab1").addClass('current'); 

     $('div[id^="sliderTab"]').hide(); 
      $('#sliderTab1').slideToggle('slow'); 
    }); 

Answer 1

は、問題が何であったかを知るが、それは働いていなかった 各スライダのために作られた単一のページで問題を修正しました。

Answer 2

を表示するには、しかし、同じような経験から、あなたが必要となります各sliderTabに異なるIDを与えるその後のような

あなたは旧姓と思いますdは、それぞれを実行するように初期化されたjquery関数を実行するために使用されます。

$("#tab1").click(function(){ 
    $('li[id^="tab"]').removeClass('current'); 
     $("#tab1").addClass('current'); 

    $('div[id^="sliderTab"]').hide(); 
     $('#sliderTab1').slideToggle('slow'); 
}); 

$("#tab1").click(function(){ 
    $('li[id^="tab"]').removeClass('current'); 
     $("#tab2").addClass('current'); 

    $('div[id^="sliderTab"]').hide(); 
     $('#sliderTab2').slideToggle('slow'); 
}); 

など。少なくとも私はどこから始めるのだろう。