Question

我正在尝试使用Jssor将图像滑块垂直旋转一组图像。我想一次显示多个图像，但是一次一个地显示它们。我添加了选项$DisplayPieces，但它似乎无法正常工作。这是我的代码：

HTML：

<div id="logo-slide-container">
    <div class="logo-slides" u="slides">
        <div><span u="image"><img id="supplierLogo" src="http://www.gstatic.com/webp/gallery/1.jpg" alt="" /></span></div>
        <div><span u="image"><img id="supplierLogo" src="http://www.gstatic.com/webp/gallery/1.jpg" alt="" /></span></div>
        <div><span u="image"><img id="supplierLogo" src="http://www.gstatic.com/webp/gallery/1.jpg" alt="" /></span></div>
        <div><span u="image"><img id="supplierLogo" src="http://www.gstatic.com/webp/gallery/1.jpg" alt="" /></span></div>
    </div>
</div>

JS：

$(document).ready(function ($) {
    var options = {
             $AutoPlay: true,
             $PlayOrientation: 2,
             $AutoPlayInterval: 2000,
             $SlideDuration: 1000,
             $DisplayPieces: 5
    };

    var jssor_slider1 = new $JssorSlider$("logo-slide-container", options);
});

这是显示问题的 Fiddle 。我无法找到包含插件的外部链接，因此我的相关js位于javascript窗口的底部。在这种情况下，我希望它一次显示5张幻灯片。

Answer 1

请将“外部容器”和“幻灯片”容器的高度设置为500px。并将$ SlideHeight明确设置为100。

的CSS：

.logo-slide-container{
    position: relative;
    top: 0px;
    left: 0px;
    width: 160px;
    height: 500px;
    background: lightgray;
}

.logo-slides{
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 500px;
}

JS：

$(document).ready(function ($) {
    var options = {
             $AutoPlay: true,
             $PlayOrientation: 2,
             $AutoPlayInterval: 2000,
             $SlideDuration: 1000,
             $SlideHeight: 100,
             $DisplayPieces: 5
             var jssor_slider1 = new $JssorSlider$("logo-slide-container", options);
});

参考：http://jsfiddle.net/jth2013/b6qpdyex/2/

此外，强烈建议按类名为“外部容器”指定css。

<div id="logo-slide-container" class="logo-slide-container">

此外，对于跨浏览器兼容性，请始终在“外部容器”的像素中指定“top”，“left”，“width”和“height”。

Jssor垂直旋转木马显示多个幻灯片

1 个答案: