how to change the width of jssor thumbnail navigator

Question

I'm trying to use the jssor transition library to have my images displaying with thumbnail navigators.

I've seen their demos and have tried to change some of the settings to change the width of the navigation bar while its in vertical mode but i cant seem to target the blank space inside of it.

Everything i've done changes the image size of the thumbnail itself, even when getting the element with chromes developer tools, i cant change the width of the element.

I have attached an image to show what i mean about the blank space.

http://imgur.com/TWsLexS

What is the correct way to manipulate the width of this navigator bar so i can stop having black spaces around the thumbnails?

Answer 1

I got what your mean exactly.

Note that the slider is with 'outer container', 'slides container' and 'thumbnail navigator container'. 'slides container' and 'thumbnail navigator container' is in the 'outer container'.

You have something right. Next you just need to adjust size of 'outer container', and adjust position of 'slides container'

Answer 2

Please change the size of thumbnail navigator element,

<div u="thumbnavigator" class="jssort02" style="position: absolute; width: 240px; height: 480px; left:0px; bottom: 0px;">

Answer 3

There are some options to do this job, like $SpacingX, $SpacingY,

            $ThumbnailNavigatorOptions: {                       //[Optional] Options to specify and enable thumbnail navigator or not
                $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always

                $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                $Lanes: 2,                                      //[Optional] Specify lanes to arrange thumbnails, default value is 1
                $SpacingX: 14,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
                $SpacingY: 12,                                   //[Optional] Vertical space between each thumbnail in pixel, default value is 0
                $Cols: 6,                             //[Optional] Number of pieces to display, default value is 1
                $Align: 156,                          //[Optional] The offset position to park thumbnail
                $Orientation: 2                                //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
            }