Jssor слайдер не останавливается и стерилизует анкерные метки

Question

Я работаю с слайдером Jssor на веб-сайте, который я создаю. Это первый раз, используя его, и я бегу на две проблемы:

1) бегунка быть стерилизацией <a> теги в слайдера <div>, удаляя в линии укладки и визуализации <a> теги ип интерактивными. Он также, похоже, толкает тег выше и вне самого ползунка. Я попытался войти в настройки разработчика браузера и изменить код в реальном времени, но анкер все еще сломан

2) Установка опции $PauseOnHover в 1 не останавливает слайдер от автозапуска при наведении указателя.

Вот мой текущий код блока на моей странице:

<script type="text/javascript" src="../js/jssor.slider.mini.js"></script> 
<script> 
    jQuery(document).ready(function ($) { 

     var options = { 
      $AutoPlay: true, 
      $PauseOnHover: 1, 
      $PlayOrientation: 1, 
      $AutoPlayInterval: 6000, 
      $SlideDuration: 850, 
     }; 

     var jssor_slider1 = new $JssorSlider$("homeslide_container", options); 
    }); 
</script> 

     <!-- Jssor Slider Begin --> 
     <div id="homeslide_container" style="position: relative; width: 944px; height: 325px;"> 

      <!-- Loading Screen --> 
      <div u="loading" style="position: absolute; top: 0px; left: 0px;"> 
       <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; 
        background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;"> 
       </div> 
       <div style="position: absolute; display: block; background: url(../images/loading.gif) no-repeat center center; 
        top: 0px; left: 0px;width: 100%;height:100%;"> 
       </div> 
      </div> 

      <!-- Slides Container --> 
      <div u="slides" style="float:left; width:765px;height:332px; overflow: hidden;">  
       <!-- SLIDE ONE --> 
       <div> 
        <a href="schooldesigns.html"> 
         <img u="image" src="images/slider/slider4.jpg" style="position:absolute; top:0; left:0;height:100%;width:100%;z-index:-2;" /> 
         <p style="font-size:2em; color:#fec30f;text-align:left;margin:15px 55px 0px 55px;text-shadow: 2px 2px black;"> 
          Welcome 
         </p> 
         <p style="font-size:3.6em; font-family: 'Work Sans', sans-serif; color:#e9e9f3;text-align:left;margin:0px 55px;text-shadow: 3px 3px black;"> 
          Class of 2016 
         </p> 
         <p style="color:#afafaf; background-color:black; position:absolute; width:100%; bottom:0px; text-transform: uppercase; font-family:'Trebuchet MS', Helvetica, sans-serif; font-size:1em; padding:2px; letter-spacing: 4px; text-shadow: 1px 1px #444444;"> 
         Brand new class list shirt designs and more  
         </p> 
        </a> 
       </div> 
       <!-- SLIDE TWO --> 
       <div> 
        <a href="gameday.html" style="position:absolute;top:0;"> 
         <img u="image" src="../images/slider/slider2.jpg" style="height:100%;width:100%;z-index:-2;" /> 
         <p style="font-size:3.6em; font-family: 'Work Sans', sans-serif; color:#e9e9f3;text-align:left;margin:0px 55px;text-shadow: 3px 3px black;"> 
          GAME ON! 
         </p> 
         <p style="font-size:2em; color:#fec30f;text-align:left;margin:15px 55px 0px 55px;text-shadow: 2px 2px black;"> 
          Bold Designs &amp; Game Jerseys 
         </p> 
         <p style="color:#afafaf; background-color:black; position:absolute; width:100%; bottom:0px; text-transform: uppercase; font-family:'Trebuchet MS', Helvetica, sans-serif; font-size:1em; padding:2px; letter-spacing: 4px; text-shadow: 1px 1px #444444;"> 
          Oversized fit for maximum comfort 
         </p> 
        </a> 
       </div> 
       <!-- SLIDE THREE --> 
       <div> 
        <img u="image" src="../images/slider/slider3.jpg" style="width:708px"/> 
       </div> 
      </div> 
      <p id="main_desc" style="height:292px; width:141px; float:right; clear:both;text-align:left; margin:0px;box-shadow:none;">Welcome to <b style="color:#00a1e4">WEBSITE</b>! Specialists in custom apparel for your 2016 senior class. <br><br>Website brings you customizable designs for your Senior, Junior, Sophomore and Freshman classes, school clubs, and sports teams!</p> 
     </div> 

     <!-- Jssor Slider End --> 

Answer 1

Пожалуйста, замените

<img u="image" src="images/slider/slider4.jpg" style="position:absolute; top:0; left:0;height:100%;width:100%;z-index:-2;" /> 

с

<img u="image" src="images/slider/slider4.jpg" /> 

BTW, $PauseOnHover: 1 должен работать. Пожалуйста, проверьте его дважды, при необходимости загрузите последнюю версию.

Answer 2

Решенный: мой CSS установил контейнер в z-индекс -10. Удаление z-индекса мгновенно решает все проблемы.