Question

我想使用一个水平滑块，它在一个或几个幻灯片中包含一个垂直滑块（它将动态构建）。我用以下代码测试了它，但我想在垂直滑块上添加垂直箭头，直到现在我都无法成功。我尝试使用AppendForwardTo和AppendBackwardTo，但它似乎只适用于第一个水平滑块。所以我想知道是否有人已经有了这个要求和问题......

 <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>

Answer 1

尝试使用此代码进行垂直幻灯片。

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
});

}）;

辅助滑块中的anythingslider垂直箭头

1 个答案: