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; 
    ... 
}