jquery.themepunch.tools.min.js:103无效的zIndex补间值:undefined

时间:2017-09-14 05:45:25

标签: javascript jquery

我在解决此问题时遇到了问题。每次返回特定页面时,我的滑块都会断开。不断抛出错误:jquery.themepunch.tools.min.js:103无效的zIndex补间值:undefined

我已经更新了所有用于革命滑块的css和JS文件,但仍然遇到了同样的问题。

*正如旁注 - 我在Angular CLI中运行*

有人可以提出建议吗?

x.test("string"==typeof a?a:(a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100:1},W=function(a){_gsScope.console&&console.log
<div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="home-01" data-source="gallery" style="background-color:transparent;padding:0px;">
    <!-- START REVOLUTION SLIDER fullscreen mode -->
    <div id="rev_slider_1_1" class="rev_slider fullscreenbanner" style="display:none;" data-version="5.4.5.1">
      <ul>  <!-- SLIDE  -->
        <li data-index="rs-1" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="300"  data-rotate="0"  data-saveperformance="off"  data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
          <!-- MAIN IMAGE -->
          <img src="assets/images/uploads/slider-home-01-slide-01-background.jpg"  alt=""  data-bgposition="center bottom" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
          <!-- LAYERS -->

          <!-- LAYER NR. 1 -->
          <div class="tp-caption   tp-resizeme"
               id="slide-1-layer-1"
               data-x="['right','right','right','right']" data-hoffset="['-127','10','5','10']"
               data-y="['middle','middle','middle','bottom']" data-voffset="['-28','0','133','10']"
               data-width="none"
               data-height="none"
               data-whitespace="nowrap"

               data-type="image"
               data-responsive_offset="on"

               data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
               data-textAlign="['left','left','left','left']"
               data-paddingtop="[0,0,0,0]"
               data-paddingright="[0,0,0,0]"
               data-paddingbottom="[0,0,0,0]"
               data-paddingleft="[0,0,0,0]"

               style="z-index: 5;"><img src="assets/images/uploads/slider-home-01-slide-01-object-01.png" alt="" data-ww="['905','605','471','286']" data-hh="['824','588','438','307']" width="930" height="876" data-no-retina> </div>

          <!-- LAYER NR. 2 -->
          <div class="tp-caption   tp-resizeme"
               id="slide-1-layer-2"
               data-x="['left','left','left','left']" data-hoffset="['10','10','10','10']"
               data-y="['middle','middle','middle','middle']" data-voffset="['-231','-231','-231','-231']"
               data-width="none"
               data-height="none"
               data-whitespace="nowrap"

               data-type="text"
               data-responsive_offset="on"

               data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
               data-textAlign="['left','left','left','left']"
               data-paddingtop="[0,0,0,0]"
               data-paddingright="[0,0,0,0]"
               data-paddingbottom="[0,0,0,0]"
               data-paddingleft="[0,0,0,0]"

               style="z-index: 6; white-space: nowrap; font-size: 24px; line-height: 24px; font-weight: 400; color: rgba(142, 179, 90, 1.00);font-family:Playfair Display;font-style:italic;letter-spacing:0.2em;">Good for nature, </div>

          <!-- LAYER NR. 3 -->
          <div class="tp-caption   tp-resizeme"
               id="slide-1-layer-3"
               data-x="['left','left','left','left']" data-hoffset="['10','10','10','10']"
               data-y="['middle','middle','middle','top']" data-voffset="['-157','-157','-157','166']"
               data-fontsize="['80','80','80','70']"
               data-fontweight="['700','700','700','400']"
               data-width="none"
               data-height="none"
               data-whitespace="nowrap"

               data-type="text"
               data-responsive_offset="on"

               data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
               data-textAlign="['left','left','left','left']"
               data-paddingtop="[0,0,0,0]"
               data-paddingright="[0,0,0,0]"
               data-paddingbottom="[0,0,0,0]"
               data-paddingleft="[0,0,0,0]"

               style="z-index: 7; white-space: nowrap; font-size: 80px; line-height: 80px; font-weight: 700; color: rgba(51, 51, 51, 1.00);font-family:Playfair Display;">good for you </div>

          <!-- LAYER NR. 4 -->
          <div class="tp-caption   tp-resizeme"
               id="slide-1-layer-4"
               data-x="['left','left','left','left']" data-hoffset="['9','9','9','10']"
               data-y="['middle','middle','middle','top']" data-voffset="['-16','-16','-16','299']"
               data-width="['470','470','470','355']"
               data-height="['123','123','123','122']"
               data-whitespace="normal"

               data-type="text"
               data-responsive_offset="on"

               data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
               data-textAlign="['left','left','left','left']"
               data-paddingtop="[0,0,0,0]"
               data-paddingright="[0,0,0,0]"
               data-paddingbottom="[0,0,0,0]"
               data-paddingleft="[0,0,0,0]"

               style="z-index: 8; min-width: 470px; max-width: 470px; max-width: 123px; max-width: 123px; white-space: normal; font-size: 15px; line-height: 26px; font-weight: 400; color: rgba(121, 117, 117, 1.00);font-family:Lato;">We don’t just bring organic produce to your door — we nurture it from seed, we harvest it by hand and we understand the responsibility entrusted to us as farmers. </div>

          <!-- LAYER NR. 5 -->
          <div class="tp-caption rev-btn "
               id="slide-1-layer-5"
               data-x="['left','left','left','left']" data-hoffset="['10','10','10','10']"
               data-y="['middle','middle','middle','middle']" data-voffset="['62','62','62','98']"
               data-width="none"
               data-height="none"
               data-whitespace="nowrap"

               data-type="button"
               data-responsive_offset="on"
               data-responsive="off"
               data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(255, 255, 255, 1.00);bg:rgba(142, 179, 90, 1.00);bw:1px 1px 1px 1px;"}]'
               data-textAlign="['left','left','left','left']"
               data-paddingtop="[12,12,12,12]"
               data-paddingright="[35,35,35,35]"
               data-paddingbottom="[12,12,12,12]"
               data-paddingleft="[35,35,35,35]"

               style="z-index: 9; white-space: nowrap; font-size: 16px; line-height: 16px; font-weight: 700; color: rgba(142, 179, 90, 1.00);font-family:Lato;background-color:rgba(142, 179, 90, 0);border-color:rgba(142, 179, 90, 1.00);border-style:solid;border-width:1px;border-radius:30px 30px 30px 30px;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">SHOP NOW </div>

          <!-- LAYER NR. 6 -->
          <div class="tp-caption insight-dots-style-2   tp-resizeme"
               id="slide-1-layer-6"
               data-x="['right','right','right','right']" data-hoffset="['138','138','138','138']"
               data-y="['bottom','bottom','bottom','bottom']" data-voffset="['22','22','22','22']"
               data-width="none"
               data-height="none"
               data-whitespace="nowrap"

               data-type="text"
               data-responsive_offset="on"

               data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
               data-textAlign="['left','left','left','left']"
               data-paddingtop="[0,0,0,0]"
               data-paddingright="[0,0,0,0]"
               data-paddingbottom="[0,0,0,0]"
               data-paddingleft="[0,0,0,0]"

               style="z-index: 10; white-space: nowrap;">01 </div>
        </li>
        <!-- SLIDE  -->
        <li data-index="rs-2" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="300"  data-rotate="0"  data-saveperformance="off"  data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
          <!-- MAIN IMAGE -->
          <img src="assets/images/uploads/slider-home-01-slide-01-background.jpg"  alt=""  data-bgposition="center bottom" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
          <!-- LAYERS -->

          <!-- LAYER NR. 7 -->
          <div class="tp-caption   tp-resizeme"
               id="slide-2-layer-2"
               data-x="['left','left','left','left']" data-hoffset="['45','45','45','16']"
               data-y="['middle','middle','middle','middle']" data-voffset="['-163','-163','-163','-223']"
               data-width="449"
               data-height="36"
               data-whitespace="normal"

               data-type="text"
               data-responsive_offset="on"

               data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
               data-textAlign="['center','center','center','center']"
               data-paddingtop="[0,0,0,0]"
               data-paddingright="[0,0,0,0]"
               data-paddingbottom="[0,0,0,0]"
               data-paddingleft="[0,0,0,0]"

               style="z-index: 11; min-width: 449px; max-width: 449px; max-width: 36px; max-width: 36px; white-space: normal; font-size: 34px; line-height: 34px; font-weight: 400; color: rgba(142, 179, 90, 1.00);font-family:Playfair Display;font-style:italic;letter-spacing:0.2em;">Live Organic </div>

          <!-- LAYER NR. 8 -->
          <div class="tp-caption   tp-resizeme"
               id="slide-2-layer-3"
               data-x="['left','left','left','left']" data-hoffset="['47','47','47','45']"
               data-y="['middle','middle','middle','top']" data-voffset="['-67','-67','-67','173']"
               data-fontsize="['80','80','80','70']"
               data-fontweight="['700','700','700','400']"
               data-width="none"
               data-height="none"
               data-whitespace="nowrap"

               data-type="text"
               data-responsive_offset="on"

               data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
               data-textAlign="['center','center','center','center']"
               data-paddingtop="[0,0,0,0]"
               data-paddingright="[0,0,0,0]"
               data-paddingbottom="[0,0,0,0]"
               data-paddingleft="[0,0,0,0]"

               style="z-index: 12; white-space: nowrap; font-size: 80px; line-height: 80px; font-weight: 700; color: rgba(51, 51, 51, 1.00);font-family:Playfair Display;">Live healthy </div>

          <!-- LAYER NR. 9 -->
          <div class="tp-caption rev-btn "
               id="slide-2-layer-5"
               data-x="['left','left','left','left']" data-hoffset="['181','181','181','146']"
               data-y="['middle','middle','middle','middle']" data-voffset="['103','103','103','4']"
               data-width="none"
               data-height="none"
               data-whitespace="nowrap"

               data-type="button"
               data-responsive_offset="on"
               data-responsive="off"
               data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(255, 255, 255, 1.00);bg:rgba(142, 179, 90, 1.00);bw:1px 1px 1px 1px;"}]'
               data-textAlign="['left','left','left','left']"
               data-paddingtop="[12,12,12,12]"
               data-paddingright="[35,35,35,35]"
               data-paddingbottom="[12,12,12,12]"
               data-paddingleft="[35,35,35,35]"

               style="z-index: 13; white-space: nowrap; font-size: 16px; line-height: 16px; font-weight: 700; color: rgba(142, 179, 90, 1.00);font-family:Lato;background-color:rgba(142, 179, 90, 0);border-color:rgba(142, 179, 90, 1.00);border-style:solid;border-width:1px;border-radius:30px 30px 30px 30px;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">SHOP NOW </div>

          <!-- LAYER NR. 10 -->
          <div class="tp-caption   tp-resizeme"
               id="slide-2-layer-4"
               data-x="['left','left','left','left']" data-hoffset="['7','7','7','60']"
               data-y="['middle','middle','middle','top']" data-voffset="['15','15','15','281']"
               data-fontsize="['24','24','24','15']"
               data-lineheight="['24','24','24','26']"
               data-fontweight="['700','700','700','400']"
               data-color="['rgba(105, 105, 105, 1.00)','rgba(105, 105, 105, 1.00)','rgba(105, 105, 105, 1.00)','rgba(121, 117, 117, 1.00)']"
               data-width="['520','520','520','356']"
               data-height="['29','29','29','none']"
               data-whitespace="normal"

               data-type="text"
               data-responsive_offset="on"

               data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
               data-textAlign="['center','center','center','center']"
               data-paddingtop="[0,0,0,0]"
               data-paddingright="[0,0,0,0]"
               data-paddingbottom="[0,0,0,0]"
               data-paddingleft="[0,0,0,0]"

               style="z-index: 14; min-width: 520px; max-width: 520px; max-width: 29px; max-width: 29px; white-space: normal; font-size: 24px; line-height: 24px; font-weight: 700; color: rgba(105, 105, 105, 1.00);font-family:Lato;text-transform:uppercase;letter-spacing:0.7em;">Trust the nature </div>

          <!-- LAYER NR. 11 -->
          <div class="tp-caption   tp-resizeme"
               id="slide-2-layer-1"
               data-x="['right','right','right','right']" data-hoffset="['-276','-155','-99','10']"
               data-y="['middle','middle','middle','bottom']" data-voffset="['-3','13','266','10']"
               data-width="none"
               data-height="none"
               data-whitespace="nowrap"

               data-type="image"
               data-responsive_offset="on"

               data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
               data-textAlign="['left','left','left','left']"
               data-paddingtop="[0,0,0,0]"
               data-paddingright="[0,0,0,0]"
               data-paddingbottom="[0,0,0,0]"
               data-paddingleft="[0,0,0,0]"

               style="z-index: 15;"><img src="assets/images/uploads/slider-home-01-slide-02-object-01.png" alt="" data-ww="['995px','605','471','286']" data-hh="['859px','588','438','307']" width="995" height="859" data-no-retina> </div>

          <!-- LAYER NR. 12 -->
          <div class="tp-caption   tp-resizeme"
               id="slide-2-layer-6"
               data-x="['right','right','right','right']" data-hoffset="['577','353','294','288']"
               data-y="['middle','middle','middle','middle']" data-voffset="['18','46','262','199']"
               data-width="none"
               data-height="none"
               data-whitespace="nowrap"

               data-type="image"
               data-responsive_offset="on"

               data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
               data-textAlign="['left','left','left','left']"
               data-paddingtop="[0,0,0,0]"
               data-paddingright="[0,0,0,0]"
               data-paddingbottom="[0,0,0,0]"
               data-paddingleft="[0,0,0,0]"

               style="z-index: 16;"><img src="assets/images/uploads/slider-home-01-slide-02-object-02.png" alt="" data-ww="['140px','140px','140px','140px']" data-hh="['140px','140px','140px','140px']" width="140" height="140" data-no-retina> </div>

          <!-- LAYER NR. 13 -->
          <div class="tp-caption insight-dots-style-2   tp-resizeme"
               id="slide-2-layer-7"
               data-x="['right','right','right','right']" data-hoffset="['138','138','138','138']"
               data-y="['bottom','bottom','bottom','bottom']" data-voffset="['22','22','22','22']"
               data-width="none"
               data-height="none"
               data-whitespace="nowrap"

               data-type="text"
               data-responsive_offset="on"

               data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
               data-textAlign="['left','left','left','left']"
               data-paddingtop="[0,0,0,0]"
               data-paddingright="[0,0,0,0]"
               data-paddingbottom="[0,0,0,0]"
               data-paddingleft="[0,0,0,0]"

               style="z-index: 17; white-space: nowrap;">02 </div>
        </li>
        <!-- SLIDE  -->
        <li data-index="rs-3" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="300"  data-rotate="0"  data-saveperformance="off"  data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
          <!-- MAIN IMAGE -->
          <img src="assets/images/uploads/slider-home-01-slide-03-bg.jpg"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>

2 个答案:

答案 0 :(得分:0)

问题在于Slider rev。需要更新到所有插件的最新版本。

答案 1 :(得分:0)

测试角度cli 1.5.0(角度5)(通用)

*ngIf="showSlider"与Revolution滑块一起使用时,似乎会出现此错误。

基本上RS并不喜欢从DOM中删除它的东西,它有附件问题......在这种情况下,angular会删除它,jQuery / RS会有点哭。

修复:

  • 使用RS的api来摧毁它,然后让棱角色做它的事。

这样做的方法很多,这就是我做的方式:

ngOnChanges() {
    if (this.hideTheSlider === true && this.slider) { 
        // queries the conditional and if the 
        // slider already exists on the dom

        // RS's kill switch
        this.slider.revkill();

        // set the ngIf conditional for the html rewrite
        this.sliderLive = false;
        setTimeout(() => this.sliderLive = true, 100);
    }
}

ngAfterViewInit() {

    if (isPlatformBrowser(this.platform)) { // due to server side rendering check if browser
         this.preloadImages();

         /* initialize the slider based on the Slider's ID attribute */
         setTimeout(() => this.slider = $(this.el.nativeElement).find('#rev_slider_1').show().revolution(this.getSliderOptions()), 10);

    }
}