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.

Answer 1

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 -->