jssor thumbnavigator not completely hidden when $ChanceToShow=0

In JSSOR 26.5, using $ThumbnailNavigatorOptions: {$ChanceToShow: 0} is supposed to completely hide the thumbnails. However, the display:none is applied only to the thumbnavigator element, NOT the container that is injected around thumbnavigator.

As a result, the absolutely-positioned container renders atop the slider. It's invisible because its only child (the thumbnavigator) is not displayed. But it intercepts click events, so it is having an effect on my UI.

In one case, the navigator (bullets) are rendered "below" the hidden thumbnails, which makes the bullets not clickable.

In version 19.0.1. there was no wrapper injected around "thumbnavigator", so the problem was not there. We moved from 19 to 26, and that is where I see the problem.

Solution is to put the display:none on the injected thumbnavigator wrapper, rather than on thumbnavigator itself.

1 answer

  • answered 2018-01-11 20:48 jssor

    Please resort html order to move bullet navigator above thumbnail navigator.

    <!-- Thumbnail Navigator -->
    <div data-u="thumbnavigator" class="jssort101" style="position:absolute;left:0px;bottom:0px;width:980px;height:100px;background-color:#000;" data-autocenter="1" data-scale-bottom="0.75">
        ...
    </div>
    <!-- Bullet Navigator -->
    <div data-u="navigator" class="jssorb032" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
        ...
    </div>