jssor carousel Having an Issue

Question

I need simple horizontal no-autoplay carousel where images are of various width but same height (117px). I need to see continuous multiple images (depending on their width) in the container separated by, say, 5px. Much like oriental lady example on jssor.com.

What I get (see below code) is perfectly working carousel, BUT only displaying single image per slide. What do I need to do/set to get multiple images per slide please?

<script src="../js/jquery-1.9.1.min.js"></script>
<script src="../js/jssor.slider.min.js"></script>
<script>
jQuery(document).ready(function (\$) {

    var options = {
     \$AutoPlay: false,
     \$Loop: 0,

    };
    var jssor_slider2 = new \$JssorSlider\$('slider2_container', options);
});
</script>



<div id="slider2_container" style="position: relative; top: 0px; left: 0px; width: 300; height: 117;">

<!-- Slides Container -->

<div u="slides" style="cursor: move; position: relative; overflow: hidden; left: 0px; top: 0px; width:300; height: 117">
    <div>
            <img   src="$imgpath/msummer2015.jpg">
            <p>Marklin Summer 2015</p>
    </div>
    <div>
            <img   src="$imgpath/m2015.jpg">
            <p>Marklin 2015</p>
    </div>
    <div>
            <img  src="$imgpath/roco2015.jpg">
            <p>Roco 2015</p>
    </div>
    <div>
            <img  src="$`enter code here`imgpath/fl2015.jpg">
            <p>Fleischmann 2015</p>
    </div>
</div>
</div>

Answer 1

First of all, please define your slider size in pixel (300px, 117px). Note that every slide should be in fixed size.

Given a slider in size 300 x 117, you can display 2 or more slides in the slides container. Please set $SlideWidth, $DisplayPieces, $SlideSpacing options.

var options = {
 $AutoPlay: false,
 $Loop: 0,
 $SlideWidth: 150,
 $DisplayPieces: 2,    //or more if you like
 $SlideSpacing: 0
};