设置响应字体大小在革命滑块 jQuery 插件中不起作用

如何解决设置响应字体大小在革命滑块 jQuery 插件中不起作用

我正在尝试为 font-size jQuery 版本中的文本设置响应式 revolution slider，但我看到 revolution slider 给它另一个内联样式的 font-size 而不是我指定的图层的 data-fontsize 属性中的字体大小。我认为它在两个视口大小之间提供了我指定的字体大小之间的另一个大小。

这是我试过的：

<section class="slider-container" id="">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div id="slider" class="rev_slider fullwidthbanner" style="display:none;" data-version="5.4.8.2">
          <ul>
            <li data-transition="cube-horizontal"  data-hideslideonmbile="false" style="">
              <img src="pictures/psy13.jpg" alt="psycholoist picture">
              <div class="tp-caption rev_group rs-parallaxlevel-1"
              data-width="100%"
              data-height="full"
              data-x="['left','left','center','center']"
              data-hoffset="['32','40','0','0']"
              data-y="['center','center']"
              data-type="group"
              data-responsive_offset="on"
              data-frames='[{
                "delay":100,"speed":300,"frame":"0","to":"o:1;","ease":"Power3.easeInOut"
              },{
                "delay":"wait","frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"
              }]'
              style="position:relative; z-index:6; "
              >
              <div class="tp-caption tp-resizeme"
                data-type="text"
                data-x="['left','center']" data-hoffset="['0','0']"
                data-y="['center','center']" data-voffset="['0','-60']"
                data-fontsize='[20,18,17,16]'
                data-lineheight="[66,52,40]"
                data-frames='[{
                  "delay":"+90","speed":1500,"from":"x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","ease":"Power3.easeInOut"
                },{
                  "delay":"wait","ease":"Power3.easeInOut"
                }]'
                data-responsive_offset="on"
                style=" z-index: 9;position: relative; white-space: nowrap; color:white; font-weight:100;"
              >
                 We Solve the problems that is beyond your control
               </div>
              </div>
              <div class="tp-caption tp-resizeme tp-shape tp-shapewrapper"
                data-x="[center,center,center]" data-hoffset="[0,0]"
                data-y="[center,center]" data-voffset="[0,0]"
                data-type="shape"
                data-height="full"
                data-width:"full"
                data-whitespace="nowrap"
                data-frames='[{
                  "delay":100,"frame":0,"from":"opacity:0;","to":"opacity:0","ease":"Power3.easeInOut"
              }]'
                style="background:rgba(0,0.35); width:200vw; position:relative; z-index:1;"
              >
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

$('#slider').show().revolution({
  delay:9000,autoHeight:"off",sliderLayout: 'fullwidth',sliderType:'standard',speed:'400',responsiveLevels:[1200,992,768,576],visibilityLevels:[1200,gridwidth:[1240,1024,778,480],gridheight:[1000,600,650,600],parallax: {
    type:"mouse",origo:"slidercenter",speed:400,speedbg:0,speedls:0,levels:[1,10,15,20,25,30,35,40,45,46,47,48,49,50,51,55],disable_onmobile:"on"
  }
});

请问，如何禁用此功能？

解决方法

我认为您的问题在于如何在 HTML 标记中提供 data-* 值。

如果它必须是一个数组，比如 data-fontsize，不要用引号将它包裹起来。
应该是 data-fontsize=[20,18,17,16]。

当插件检索值时，使用 jQuery .data("key")，它会自动将值解析为正确的类型...

尝试将属性的字符串值转换为 JavaScript 值（包括布尔值、数字、对象、数组和 null）。 ^Ref

但是如果你将它“强制”为一个字符串...;)

所以这同样适用于很多地方。

,

您可以尝试在字符串数组中传递值而不是数字，所以尝试

data-fontsize="['20','18','17','16']"

正如我所见，您使用了 responsiveLevels 的 Revolution Slider，因此您可以设置不同的字体大小，直到 4 种屏幕分辨率

responsiveLevels:[1200,992,768,576]

所以

• 对于低于 576 像素的分辨率，字体大小为 16 像素
• 对于低于 768 像素的分辨率，字体大小为 17 像素
• 对于低于 992 像素的分辨率，字体大小为 18 像素
• 对于低于 1200 像素的分辨率，字体大小为 20 像素