如何在 Jssor 中自定义箭头导航

Question

我刚刚在 Jssor 中支付了高级计划，我想尝试使用自定义导航箭头，可以这样做吗？如果是这样，我该怎么做？谢谢！

Answer 1

箭头导航器模板有 2 部分，css 代码和 html 代码，看起来像 https://www.jssor.com/theme/arrow/arrow-skin-053-white.txt.

例如，演示滑块 (https://www.jssor.com/demos/image-slider.slider) 使用 jssor arrow navigator 053。

查看滑块源码(view-source:https://www.jssor.com/demos/image-slider.slider/=preview)，可以找到如下代码，

<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>

打开滑块(https://www.jssor.com/demos/image-slider.slider/=edit)，然后打开布局window，切换到arrows选项卡，然后单击...按钮。

您会看到模板文件路径为/theme/arrow/arrow-skin-053-white.txt。

您可以在这里获取模板文件(https://www.jssor.com/theme/arrow*)，内容如下，

{
    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
    }
}

修改代码，保存到自己的工作区，就是一个属于自己的新箭头导航模板，恭喜！

如何在 Jssor 中自定义箭头导航

How to customize arrow navigation in Jssor

navigation

arrows

jssor