我在解决此问题时遇到了问题。每次返回特定页面时,我的滑块都会断开。不断抛出错误: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>
答案 0 :(得分:0)
问题在于Slider rev。需要更新到所有插件的最新版本。
答案 1 :(得分:0)
测试角度cli 1.5.0(角度5)(通用)
将*ngIf="showSlider"
与Revolution滑块一起使用时,似乎会出现此错误。
基本上RS并不喜欢从DOM中删除它的东西,它有附件问题......在这种情况下,angular会删除它,jQuery / RS会有点哭。
修复:
这样做的方法很多,这就是我做的方式:
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);
}
}