幻燈片2周在同一時間的div使用基金會的軌道內容滑塊

Question

我需要動畫/幻燈片組合頁面上的兩個格（按照附加的圖像，無論是筆記本電腦和手機上的截圖）同時當箭在點擊。我可以適度理解/更改JS插件，並且非常精通HTML/CSS。任何推薦的插件或方法來做到這一點，而不必編寫特定的JS代碼？

我使用的是從Zurb基礎框架，它有內置的「軌道」滑塊插件PS，不知道，這是不夠的定製，以退出這個功能雖然

Answer 1

有做的不亂的現成辦法，但你能砍左右。假設你有以下軌道：

<div class="row"> 
    <div class="large-8 columns"> 
     <ul data-orbit id="slider1"> 
      <li> 
      <img src="http://placehold.it/800x350&text=slide 1" />     
      </li> 
      <li> 
      <img src="http://placehold.it/800x350&text=slide 2" />     
      </li> 
      <li> 
      <img src="http://placehold.it/800x350&text=slide 3" />     
      </li> 
     </ul> 
    </div> 
</div> 
<div class="row"> 
    <div class="large-4 columns"> 
     <ul data-orbit id="slider2"> 
      <li> 
      <img src="http://placehold.it/400x150&text=slide 1" />     
      </li> 
      <li> 
      <img src="http://placehold.it/400x150&text=slide 2" />     
      </li> 
      <li> 
      <img src="http://placehold.it/400x150&text=slide 3" />     
      </li> 
     </ul> 
    </div> 
</div> 

您可以通過點擊導航箭頭同步兩個軌道的滑動，規定，兩個軌道具有相同的timer_speed（默認情況下它們會）：

<script type="text/javascript"> 
    $(document).foundation(); 
    $(document).ready(function() { 
     var fromSlide1 = false; 
     var fromSlide2 = false; 
     var slider1 = $("#slider1"); 
     var slider2 = $("#slider2"); 
     var slider1Prev = slider1.parent().find(".orbit-prev"); 
     var slider2Prev = slider2.parent().find(".orbit-prev"); 
     var slider1Next = slider1.parent().find(".orbit-next"); 
     var slider2Next = slider2.parent().find(".orbit-next"); 

     slider1Prev.click(function() { 
      if (fromSlide1) return; 
      fromSlide1 = true;    
      slider2Prev.click(); 
      fromSlide1 = false; 
     }); 
     slider2Prev.click(function() { 
      if (fromSlide2) return; 
      fromSlide2 = true; 
      slider1Prev.click(); 
      fromSlide2 = false; 
     }); 
     slider1Next.click(function() { 
      if (fromSlide1) return; 
      fromSlide1 = true;    
      slider2Next.click(); 
      fromSlide1 = false; 
     }); 
     slider2Next.click(function() { 
      if (fromSlide2) return; 
      fromSlide2 = true; 
      slider1Next.click(); 
      fromSlide2 = false; 
     }); 
    }); 
</script> 

Answer 2

jQuery的動畫功能的工作原理異步所以你可以調用元素的動畫在同一時間：

var deltaW = window.innerWidth; 

$('#myDiv1').animate({left : deltaW}); 
$('#myDiv2').animate({left : deltaW}); 

您還可以觸發功能，當動畫完成：

$('#myDiv1').animate({left : deltaW}); 
$('#myDiv2').animate({left : deltaW }, function() { /*.. do something ..*/}); 

編輯：worki正常例子（請注意爲CSS規則的位置屬性）：
http://jsfiddle.net/2gCKY/1/