小滑块垂直滑块大布局变化..如何解决？答案

【问题标题】：tiny slider vertical slider large layout shifts.. how to fix?小滑块垂直滑块大布局变化..如何解决？
【发布时间】：2022-07-11 22:25:46
【问题描述】：

我正在使用tiny slider，而垂直滑块选项在加载时会导致较大的布局变化。我在 Google Page Speed “避免大的布局变化”中收到此消息。我想修复。请问有人可以推荐修复方法吗？

我有 2 个彼此相邻的垂直滑块，并且在加载时有 1 个在视口下方延伸。

演示链接/滑块设置： https://codepen.io/matt-giggs/pen/wvyMBzR

jQuery(window).bind("load", function() {
    
  if (document.querySelectorAll('.tiny-slider').length > 0) {
      const slider1 = tns({
            container: ".tiny-slider",
            items: 3,
            slideBy: 1,
            axis: 'vertical',
            autoplayDirection: 'forward',
              "mouseDrag": false,
            "swipeAngle": false,
            "speed": 500,
            "autoplay": false,
            touch:false,
            autoplayButtonOutput : false,
            nav: false,
            loop: true,
            autoHeight:false,
            autoWidth:false,
            preventActionWhenRunning : true,
            preventScrollOnTouch : 'auto',
                     controlsContainer: '.slider-controls',
                              onInit: function (info) {


                              }   
      });
  }

    
});

这是加载时的外观 -

已加载 -

【问题讨论】：

标签： javascript html jquery css tiny-slider

【解决方案1】：

您需要为 .tiny-slider 类设置静态高度

【讨论】：