Comment changer la largeur de JSSOR Thumbnail Navigator

Question

J'essaie d'utiliser la bibliothèque de transition JSSOR pour que mes images affichent avec des navigateurs miniables.

J'ai vu leurs démos et j'ai essayé de modifier certains des paramètres pour modifier la largeur de la barre de navigation pendant son mode vertical, mais je ne peux pas sembler cibler l'espace vide à l'intérieur.

Tout ce que j'ai fait change la taille de l'image de la vignette elle-même, même lors de l'obtention de l'élément avec des outils de développeur de chromes, je ne peux pas changer la largeur de l'élément.

J'ai attaché une image pour montrer ce que je veux dire sur l'espace vide.

http://imgur.com/twslexs

Quelle est la bonne façon de manipuler la largeur de cette barre de navigateur afin que je puisse arrêter d'avoir des espaces noirs autour des vignettes?

Answer 1

J'ai eu ce que tu veux dire exactement.

Notez que le curseur est avec "conteneur extérieur", "Conteneur de diapositives" et "Thumbnail Navigator Navigator". "Conteneur de diapositives" et "Thumbnail Navigator Navigator" est dans le "conteneur extérieur".

Vous avez quelque chose de bien.Ensuite, il vous suffit de régler la taille du "conteneur extérieur" et de régler la position du "conteneur de diapositives"

Answer 2

Veuillez changer la taille de l'élément Navigator Thumbnail,

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

Answer 3

Il y a quelques options pour faire ce travail, comme $ 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
            }