Jssor - 改变箭头大小

Question

我在更改滑块箭头的大小方面遇到了麻烦：

• 修改.jssora03r {样式中的宽度和高度属性 代码}并添加背景大小：自动箭头消失。

以下是代码：

        <script>
        jQuery(document).ready(function($) {
            var options = {
                $DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
                $ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
                    $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
                    $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
                    $AutoCenter: 0, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                    $Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1

                }
            };

            var jssor_slider1 = new $JssorSlider$("slider1_container", options);
            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizes
            function ScaleSlider() {
                var bodyWidth = document.body.clientWidth;
                if (bodyWidth)
                    jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));
                else
                    window.setTimeout(ScaleSlider, 30);
            }
            ScaleSlider();

            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);
            //responsive code end
        });
    </script>
    <!-- Jssor Slider Begin -->
    <!-- To move inline styles to css file/block, please specify a class name for each element. -->
    <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px;
    height: 150px; ">

        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 150px;
        overflow: hidden;">
            <div><img u="image" src="1.jpg" /></div>
            <div><img u="image" src="2.jpg" /></div>

        </div>

        <!--#region Arrow Navigator Skin Begin -->
        <!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
        <style>
            /* jssor slider arrow navigator skin 03 css */
            /*
        .jssora03l                  (normal)
        .jssora03r                  (normal)
        .jssora03l:hover            (normal mouseover)
        .jssora03r:hover            (normal mouseover)
        .jssora03l.jssora03ldn      (mousedown)
        .jssora03r.jssora03rdn      (mousedown)
        */

            .jssora03l,
            .jssora03r {
                display: block;
                position: absolute;
                /* size of arrow element */
                width: 55px;
                height: 55px;
                cursor: pointer;
                background: url(img/a03.png) no-repeat;
                background-size: auto;
                overflow: hidden;
            }

            .jssora03l {
                background-position: -3px -33px;
            }

            .jssora03r {
                background-position: -63px -33px;
            }

            .jssora03l:hover {
                background-position: -123px -33px;
            }

            .jssora03r:hover {
                background-position: -183px -33px;
            }

            .jssora03l.jssora03ldn {
                background-position: -243px -33px;
            }

            .jssora03r.jssora03rdn {
                background-position: -303px -33px;
            }
        </style>
        <!-- Arrow Left -->
        <span u="arrowleft" class="jssora03l" style="top: 60px; left: 8px;">
    </span>
        <!-- Arrow Right -->
        <span u="arrowright" class="jssora03r" style="top: 60px; right: 8px;">
    </span>
        <!--#endregion Arrow Navigator Skin End -->
        <a style="display: none" href="http://www.jssor.com">Bootstrap Slider</a>
    </div>
    <!-- Jssor Slider End -->

Answer 1

如果您打开img/a03.png，您会看到有3张图片。 您无法设置background-size: auto;。

修改 请在此处更改箭头width/height。

.jssora03l,
.jssora03r {
    ...
    width: 55px;
    height: 55px;
    ...
}