jssor slider thumbnail position

Question

I have a site that has the Jssor slider with a horizontal row of thumbnails below it (using jssor slider thumbnail navigator skin 07). As far as I can tell the left positioning CSS of each thumbnail div in the thumbnavigator is dynamically inserted by the javascript.

Thumbnail Div 1 CSS

element.style {
    width: 202px;
    height: 102px;
    top: 0px;
    left: 0px;
    position: absolute;
    overflow: hidden;
    transform: perspective(2000px);
}

Thumbnail Div 2 CSS

element.style {
    width: 202px;
    height: 102px;
    top: 0px;
    left: 217px;
    position: absolute;
    overflow: hidden;
    transform: perspective(2000px);
}

Thumbnail Div 3 CSS

element.style {
    width: 202px;
    height: 102px;
    top: 0px;
    left: 434px;
    position: absolute;
    overflow: hidden;
    transform: perspective(2000px);
}

I've modified the size of the thumbnails using my own CSS but the positioning remains the same because each div is being dynamically generated without an individual CSS class or ID for me to reference. So, if I overwrite the CSS left positioning it does it for all of the thumbnail divs and they just stack on top of one another.

I'd like to find out what I need to edit (in the javascript or the CSS) to change the pixel amount or percentage of left positioning each thumbnail div is being assigned so the new sized thumbnails fit my slider.

jssor · Answer 1 · 2015-04-20T23:08:01.887

Thumbnails will be generated automatically, and all thumbnails will be placed in the center of the thumbnail navigator container.

But actually, it is fully customizable.

First, you can adjust layout (size/position) of thumbnail navigator container.

<!-- thumbnail navigator container -->
<div u="thumbnavigator" class="jssort07" style="left: 0px; bottom: 0px; width: 800px; height: 100px;">
    ...
</div>
<!--#endregion Thumbnail Navigator Skin End -->

And also you can insert the thumbnail navigator container in a wrapper of your own which is fully customizable.

<div style="position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;>
    <div u="thumbnailnavigator" ...>
        ...
    </div>
</div>

Edit:

$ThumbnailNavigatorOptions: {
    ...,
    $DisplayPieces: 5, //indicates how many columns to display
    $Lanes: 1, //indicates how many rows to display
    $SpacingX: 10, //indicates horizontal spacing
    $SpacingY: 10, //indicates vertical spacing
    ...
}

Reference: http://www.jssor.com/development/reference-options.html#thumbnailNavigatorOptions

Thanks but I'm not asking how to adjust the size and position of the thumbnail navigator container. I am asking how to adjust the position of the thumbnails themselves. In my code example above it shows each thumbnail is receiving a different left position dynamically from the javascript (growing larger as each thumbnail is being positioned further away from the left). I am wondering how do I adjust this value or equation in the script. Right now, it is positioning the thumbnail divs too far apart, I want them to b closer together. — Robb Graves, Apr 20 '15 at 15:13

score 0 · Accepted Answer · answered Apr 21 '15 at 18:35

I appreciate the attempt to help but the $SpacingX and $SpacingY did not help in my case. There is a section of the .ascx file that has a hardcoded width. When I edited that, I was able to see all of the thumbnails and position them accordingly:

<!-- Thumbnail Navigator Skin Begin -->
    <div u="thumbnavigator" class="jssort07" >
        <div style="width: 100%; height:100%;"></div>
        <!-- Thumbnail Item Skin Begin -->
        <!-- width:160px; +10px for padding, + 30px for margin, +2px for border|| height:80px; + 10px for padding, +2 px for border + 10px for red arrow on hover -->
        <div u="slides" style="cursor: move;">
            <div u="prototype" class="p" style="POSITION: absolute; WIDTH:150px; HEIGHT:102px; TOP: 1px; LEFT: 0;">
                <thumbnailtemplate class="i" style="position:absolute;"></thumbnailtemplate>
                <div class="o">
                </div>
            </div>
        </div>
        <!-- Thumbnail Item Skin End -->

    </div>
    <!-- ThumbnailNavigator Skin End -->

jssor slider thumbnail position

2 Answers2