Friday, 1 January 2021

Setting responsive font size doesn't work in revolution slider jQuery plugin

I'm trying to set responsive font-size for text in revolution slider jQuery version but I see revolution slider gives it another font-size in inline style by itself instead of my specified font sizes in the data-fontsize attribute for the layer. I Think that it gives another sizes between my specified font size between two viewport sizes.

This is what i've tried:

<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','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",
                "speed":300,
                "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','left','center','center']" data-hoffset="['0','0','0','0']"
                data-y="['center','center','center','center']" data-voffset="['0','0','0','-60']"
                data-fontsize='[20,18,17,16]'
                data-lineheight="[66,52,52,40]"
                data-frames='[{
                  "delay":"+90",
                  "speed":1500,
                  "frame":"0",
                  "from":"x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;",
                  "to":"o:1;",
                  "mask":"x:0px;y:0px;s:inherit;e:inherit;",
                  "ease":"Power3.easeInOut"
                },{
                  "delay":"wait",
                  "speed":300,
                  "frame":"999",
                  "to":"opacity:0;",
                  "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,center]" data-hoffset="[0,0,0,0]"
                data-y="[center,center,center,center]" data-voffset="[0,0,0,0]"
                data-type="shape"
                data-height="full"
                data-width:"full"
                data-whitespace="nowrap"
                data-frames='[{
                  "delay":100,
                  "speed":1500,
                  "frame":0,
                  "from":"opacity:0;",
                  "to":"o:1;",
                  "ease":"Power3.easeInOut"
              },
              {
                  "delay":"wait",
                  "speed":300,
                  "frame":"999",
                  "to":"opacity:0",
                  "ease":"Power3.easeInOut"
              }]'
                style="background:rgba(0,0,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,992,768,576],
  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"
  }
});

Please, How to disable this?



from Setting responsive font size doesn't work in revolution slider jQuery plugin

No comments:

Post a Comment