Question

我正在尝试垂直滑动内容。在文档页面中没有任何关于垂直循环幻灯片。只有垂直滑块带有图像。我尝试了很多选项，但似乎我的代码不起作用。请帮助我们。添加完所有代码后，内容不会完全滑动。

HTML代码

    <div class="fl testimonial">
                        <div class="homepage-row-1st">
                            <div class="chart"></div>
                            <p>Messges</p>
                        </div>

                    <!-- Message Slider -->
                        <div id="slider1_vertical" style="position: relative; margin: 0 auto;top: 0px; left: 0px; width: 385px; height: 274px;">
                         <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 385px;height: 274px; overflow: hidden;">
                         <div>
                        <div class="homepage-row-2nd">
                            <div class="fl comma">
                                <div class="comma-img"></div>
                            </div>
                            <div class="fl Message-desc">
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                                </p>
                                <div class="parent-name">Mr. xx xx (parent), <i>Ohio</i></div>
                            </div>
                            <div class="cb"></div>
                        </div>
                        </div>
                        <div>
                        <div class="homepage-row-2nd">
                            <div class="fl comma">
                                <div class="comma-img"></div>
                            </div>
                            <div class="fl message-desc">
                                <p>
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                                </p>
                                <div class="name">xxx xxx (customer), <i>Ontario</i></div>
                            </div>
                            <div class="cb"></div>
                        </div>
                        </div>
                        <div>
                        <div class="homepage-row-2nd">
                            <div class="fl comma">
                                <div class="comma-img"></div>
                            </div>
                            <div class="fl message-desc">
                                <p>
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                                </p>
                                <div class="name">xxx xxx(customer), <i>Alaska</i></div>
                            </div>
                            <div class="cb"></div>
                        </div>
                        </div>
                        </div>
                        </div>
                    </div>

Jquery代码

$(document).ready(function(){

        var options_for_testimonial = {
            $AutoPlay:true,
            $AutoPlayInterval: 4000,
            $PauseOnHover: 1, 
            $ArrowKeyNavigation: false,
            $SlideDuration: 800,
            $MinDragOffsetToSlide: 20,
            $SlideSpacing: 0,
            $DisplayPieces: 1,
            $ParkingPosition: 0,
            $UISearchMode: 1,
            $PlayOrientation: 2,
            $DragOrientation: 2,
        };
        var jssor_slider2 = new $JssorSlider$("slider1_vertical", options_for_testimonial);

});

Answer 1

我刚刚测试了你的代码，它运作良好。

此外，您可以改进代码的语法，请将$DragOrientation: 2,替换为$DragOrientation: 2。

垂直滑块与内容

1 个答案: