Cómo cambiar el ancho de JSSOR Thumbnail Navigator

Question

Estoy tratando de usar la biblioteca de transición de JSSOR para que mis imágenes muestran con los navegadores de miniaturas.

He visto sus demostraciones y he intentado cambiar algunas de las configuraciones para cambiar el ancho de la barra de navegación mientras está en modo vertical, pero parece que no puedo apuntar al espacio en blanco dentro de él.

Todo lo que he hecho cambia el tamaño de la imagen de la miniatura en sí misma, incluso al obtener el elemento con las herramientas de desarrollador de Chromes, no puedo cambiar el ancho del elemento.

He adjuntado una imagen para mostrar lo que quiero decir con el espacio en blanco.

http://imgur.com/twslexs

¿Cuál es la forma correcta de manipular el ancho de esta barra de navegador para que pueda dejar de tener espacios negros alrededor de las miniaturas?

Answer 1

Tengo lo que quiere decir exactamente.

Tenga en cuenta que el control deslizante está con 'Contenedor exterior', 'Contenedor de diapositivas' y 'Thumbnail Navigator Container'. 'Contenedor de diapositivas' y 'Thumbnail Navigator Container' está en el 'contenedor exterior'.

tienes algo bien.A continuación, solo necesita ajustar el tamaño del 'contenedor exterior', y ajuste la posición del "contenedor de diapositivas"

Answer 2

Por favor, cambie el tamaño del elemento navegador en miniatura,

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

Answer 3

Hay algunas opciones para hacer este trabajo, como $ 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
            }