CODEWITHSUNDEEP
jqueryjquery-pluginsslideshowcarouseljssor
Jmh2013
Jmh2013

Reputation: 2777

Jssor vertical carousel show multiple slides

I am trying to use Jssor for an image slider to vertically rotate through a set of images. I want to display more than 1 image at a time, but step through them one at a time. I have added the option $DisplayPieces but it doesn't seem to work. Here is my code:

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

Here is a Fiddle that shows the problem. I couldn't find an external link for including the plugin, so my relevant js is at the bottom of the javascript window. In this case I want it to show 5 slides at once.

Upvotes: 1

Views: 1857

Answers (1)

jssor
jssor

Reputation: 6985

Please set height to 500px for 'outer container' and 'slides' container. And set $SlideHeight to 100 explicitely.

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

reference: http://jsfiddle.net/jth2013/b6qpdyex/2/

In addition, it's highly recommended to specify css for 'outer container' by class name.

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

Also, for cross browser compatibility, please always specify 'top', 'left', 'width' and 'height' in pixel for 'outer container'.

Upvotes: 1

Related Questions