jQuery移动版；twentytwenty插件只有在调整浏览器窗口大小时才会出现

Question

我不确定为什么会发生这种情况，因为我已经按照Zurb网站上的说明进行了操作。使用TwentyTwenty打开页面时，窗口的大小并不重要，它只会在页面调整大小时显示滑块。除此之外，这个插件运行得无懈可击。我有一种感觉，有一些方法可以调整以下内容，使其加载而不需要调整窗口大小……

$(window).load(function() {
  $(".twentytwenty-container").twentytwenty();
});

也许吧?非常感谢。

Answer 1

这是一个小bug，但通过添加代码来修复。将此文件添加到jquery.twentytwenty.js文件：

​

$(window).load(function() {
   $(window).trigger("resize.twentytwenty");
});

​

  $.fn.twentytwenty = function(options) {
     var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);

    // >>>>> HERE ADD CODE <<<<<<

     return this.each(function() {

//.......

来源：https://github.com/zurb/twentytwenty/pull/69/commits/471a824bf5ab233797d0de689a5be105347c81e2

Answer 2

我已经在这个问题上坐了很长时间了。我在代码中使用了.twentytwenty-container类。当我把它换成一个id (这里是#container-id)时，这个问题似乎就消失了。

$(window).load(function(){
  $("#container-id").twentytwenty({
    default_offset_pct: 0.5, // How much of the before image is visible when the page loads
    orientation: 'horizontal' // Orientation of the before and after images ('horizontal' or 'vertical')
  });
});

这对其他人有效吗？