CODEWITHSUNDEEP
javascriptslideshowjssor
andysd
andysd

Reputation: 155

How to auto center JSSOR arrow so that thumbnail row is taken into account?

I have some JSSOR code like this the regular demos...

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 488px;">
    <!-- Slides -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 400px;" >
        <div>
            <img u="image" ... />
            <img u="thumb" ... />
        </div>
        <div>
            <img u="image" ... />
            <img u="thumb" ... />
        </div>
    </div>

    <!-- Arrow Left -->
    <span u="arrowleft" class="jssoral" style="left: 8px;"></span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssorar" style="right: 8px;"></span>

    <!-- thumbnail navigator -->
    <div u="thumbnavigator" class="jssort01" style="left: 0px; bottom: 0px;">
        ...
    </div>
</div>

Notice that the container height is 88px larger than the slide height. That is the space allocated for the Thumbnail Navigator.

In my JavaScript, I am specifying AutoCenter on the arrows:

$ArrowNavigatorOptions: {
    $Class: $JssorArrowNavigator$,
    $ChanceToShow: 2,
    $AutoCenter: 2,
    $Steps: 1
}

but what happens is the arrows are vertically centered in the overall jssor container, not in the slide itself.

I know the doc mentions that the arrows are centered in their container, but generally what you want is for them to be centered in the SLIDE.

How can I center the arrows within the SLIDE? Doesn't seem like I can move the arrow SPANs into the slides DIV. Is this possible?

Upvotes: 0

Views: 693

Answers (1)

jssor
jssor

Reputation: 6985

Please disable autocenter ($AutoCenter: 0),

$ArrowNavigatorOptions: {
    $Class: $JssorArrowNavigator$,
    $ChanceToShow: 2,
    $AutoCenter: 0,
    $Steps: 1
}

And then you can adjust position manually (top: 175px;),

<!-- Arrow Left -->
<span u="arrowleft" class="jssoral" style="top: 175px; left: 8px;"></span>
<!-- Arrow Right -->
<span u="arrowright" class="jssorar" style="top: 175px; right: 8px;"></span>

Upvotes: 1

Related Questions