Search code examples
javascriptjssor

Is it possible to move arrow span out of the default parent container in jssor?


Is it possible to move arrow span

<span u="arrowright" class="jssora13r" style="height: 50px;
    margin-right: -480px;
    position: absolute;
    right: 50%;
    top: 200px;
    width: 50px;">
</span>

outside of the div#slider1_container container to any other part of the page?

Btw I tried to specify

$ArrowNavigatorOptions: {
    $Class: 'myOwnCssClass',
    ...
}

and it doesn't work for me ((

Upd from comment:

In examples I've found arrows are in the slider container (like this). When I'm trying move it outside, e.g. to root of the 'body' buttons are shown but no reaction on click :( For my layout I must move it to root to implement my customization.


Solution

  • The arrow is already outside of 'slides' container.

    You can arrange layout and adjust size manually.

    Reference: http://www.jssor.com/development/tip-arrange-layout-adjust-size.html

    Edit:

    I was thinking that you can make the 'slider1_container' bigger to achieve your goal.

    And now, please note that when you move the arrow outside, it is no longer a part of jssor slider. You have to detect click on the arrow, and then call api to make jssor slider slide left<->right.

    function OnArrowLeftClick() {
        jssor_slider1.$Prev();
    }
    
    function OnArrowRightClick() {
        jssor_slider1.$Next();
    }