Search code examples
navigationjssorarrows

How to customize arrow navigation in Jssor

I just paid the premium plan in Jssor and I want to try using custom navigation arrows, is it possible to do this? If so, how could I do it? Thank you!

Solution

  • Arrow navigator template has 2 parts, css code and html code, it looks like https://www.jssor.com/theme/arrow/arrow-skin-053-white.txt.

    For example, a demo slider (https://www.jssor.com/demos/image-slider.slider) uses jssor arrow navigator 053.

    View source code of the slider (view-source:https://www.jssor.com/demos/image-slider.slider/=preview), you can find the following code,

    <style>
    /*jssor slider arrow skin 053 css*/
    .jssora053 {display:block;position:absolute;cursor:pointer;}
    .jssora053 .a {fill:none;stroke:#fff;stroke-width:640;stroke-miterlimit:10;}
    .jssora053:hover {opacity:.8;}
    .jssora053.jssora053dn {opacity:.5;}
    .jssora053.jssora053ds {opacity:.3;pointer-events:none;}
</style>

<!-- Arrow Navigator -->
<div data-u="arrowleft" class="jssora053" style="width:55px;height:55px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
    <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
        <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
    </svg>
</div>
<div data-u="arrowright" class="jssora053" style="width:55px;height:55px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
    <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
        <polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
    </svg>
</div>

    Open the slider (https://www.jssor.com/demos/image-slider.slider/=edit), and then open the layout window, switch to arrows tab, and then click the ... button.

    enter image description here

    You will see the template file path is /theme/arrow/arrow-skin-053-white.txt.

    You can get the template file here (https://www.jssor.com/theme/arrow*), the content is as below,

    {
    id: "jssora053",
    type: "arrow",
    name: "arrow skin 053 white",
    note: "",
    css: ''
        + '\r\n/*jssor slider arrow skin 053 css*/'
        + '\r\n.jssora053 {display:block;position:absolute;cursor:pointer;}'
        + '\r\n.jssora053 .a {fill:none;stroke:#fff;stroke-width:640;stroke-miterlimit:10;}'
        + '\r\n.jssora053:hover {opacity:.8;}'
        + '\r\n.jssora053.jssora053dn {opacity:.5;}'
        + '\r\n.jssora053.jssora053ds {opacity:.3;pointer-events:none;}',
    html: ''
        + '\r\n<div data-u="arrowleft" class="jssora053" style="width:55px;height:55px;top:162px;left:25px;">'
        + '\r\n    <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">'
        + '\r\n        <polyline class="a" points="11040,1920 4960,8000 11040,14080 "/>'
        + '\r\n    </svg>'
        + '\r\n</div>'
        + '\r\n<div data-u="arrowright" class="jssora053" style="width:55px;height:55px;top:162px;right:25px;">'
        + '\r\n    <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">'
        + '\r\n        <polyline class="a" points="4960,1920 11040,8000 4960,14080 "/>'
        + '\r\n    </svg>'
        + '\r\n</div>',
    defaultValue: {
        itemWidth: 55,
        itemHeight: 55,
        poslLeft: 25,
        posrRight: 25,
        posAutoCenter: 2,
        bhvScaleL: .75,
        bhvScalePos: .75
    }
}

    Modify the code, and save it to your own workspace, it's a new arrow navigator template of your own, congratulations!