anythingslider輔助滑塊中的垂直箭頭

我想使用一個水平滑塊，它包含一個或多個幻燈片中的一個垂直滑塊（它將被動態構建）。我測試了下面這段代碼，但我想向垂直滑塊添加垂直箭頭，直到現在我無法成功。我嘗試使用AppendForwardTo和AppendBackwardTo，但它似乎只適用於第一個水平滑塊。所以我想知道如果有人已經得到了這個要求和問題...anythingslider輔助滑塊中的垂直箭頭

<body> 
    <div> 
     <div style="height: 450px;"> 
      <div id="Div2"> 
         </div> 
      <ul id="slider"> 
       <li> <h2> H1 First Slide of the master horizontal slider</h2></li>  
       <li> <h2> H2 Second Slide of the master horizontal slider</h2> </li> 
       <li> <h2> H3 Third Slide of the master horizontal slider</h2> </li> 
       <li> 
        <div style="height: 350px;"> 
         <div id="arrow-up">       
         </div> 
         <ul id="slider2"> 
          <li> <h2> V1 First Slide of the secondary vertical slider in slide H4</h2></li>  
          <li> <h2> V2 Second Slide of the secondary vertical slider in slide H4</h2> </li> 
          <li> <h2> V3 Third Slide of the secondary vertical slider in slide H4</h2> </li> 
         </ul> 
         <div id="arrow-down"> 
         </div> 
        </div> 
       </li> 
       <li> <h2> H5 Fifth Slide of the master horizontal slider</h2> </li> 
      </ul> 
       <div id="Div1"> 
         </div> 
     </div> 
    </div> 
    <script> 
     $(document).ready(function() { 
      $('#slider').anythingSlider({ 
       theme: 'minimalist-square', 
       buildArrows: true, 
       expand: true, 
       infiniteSlides: false, 
       stopAtEnd: true, 
//    appendForwardTo: $('#Div1'), 
//    appendBackTo: $('#Div2'), 
       autoPlay: false 
      }); 
      $('#slider2').anythingSlider({ 
       theme: 'minimalist-square', 
       buildArrows: true, 
       expand: true, 
       vertical: true, 
//    appendForwardTo: $('#arrow-down'), 
//    appendBackTo: $('#arrow-up'), 
       autoPlay: false 
      }); 
     }); // end ready 
    </script> 
</body>

來源

2014-10-27 Alain BUFERNE

隨着我繼續搜索，我發現我的兩個滑塊上不能有兩個不同的主題。 – 2014-10-27 16:40:51

試試這個代碼垂直幻燈片。

jQuery(document).ready(function($) { 
$('#simple-vertical').royalSlider({ 
    arrowsNav : true, 
    arrowsNavAutoHide : false, 
    fadeinLoadedSlide : true, 
    controlNavigation : 'none', 
    imageScaleMode : 'fill', 
    imageAlignCenter : true, 
    loop : false, 
    loopRewind : false, 
    numImagesToPreload : 4, 
    slidesOrientation : 'vertical', 
    keyboardNavEnabled : true, 
    video : { 
     autoHideArrows : true, 
     autoHideControlNav : true 
    }, 
    autoScaleSlider : true, 
    autoScaleSliderWidth : 960, 
    autoScaleSliderHeight : 850, /* 
            * size of all images 
            * http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq 
            * /adding-width-and-height-properties-to-images 
            */ 
    imgWidth : 640, 
    imgHeight : 360 
});

}）;

來源

2014-10-27 11:42:34 ramazankul

anythingslider輔助滑塊中的垂直箭頭

回答

相關問題