jquery - 触发器 insertItem 上的 CarouFredSel 元素宽度问题

Question

我在 wordpress 主题中使用响应式 CarouFredSel slider 。我在窗口宽度更改时删除并放回 slider 元素(第一个 slider 元素，即菜单):如果宽度小于 980 像素，则删除，如果宽度返回超过 980 像素，则放回去。所以此时此刻 - 一切正常。

问题出现了，当插入的元素显示时 - 它的宽度尺寸错误。它是如何发生的:我正在减小浏览器窗口的大小，直到它低于 980px(元素应该删除)，然后我在浏览器上按“最大化”按钮，所以大小会恢复并达到更大比它需要插入元素回来。我想，在那一刻，CarouFredSel 调整了所有元素的大小，除了我在调整大小时插入的元素。在调整大小之前，那个元素的宽度与其他元素的宽度相同。因此，如果所有元素的宽度都是 700 像素，那么在最大化浏览器之后，每个人的宽度都会达到 1335 像素，除了我要添加的元素 - 它保持 700 像素的大小。

我正在寻找一种方法，如果窗口大小发生变化，如何在 CarouFredSel 调整元素大小之前触发 insertItem。或者任何方式，我可以修复那个尺寸。好吧，我想我可以获得相同级别的元素 (divs) 大小，然后手动将其添加到我的元素中，但这不是好方法。关于这个问题的任何想法都会很棒。

这是一段代码:

var $window = $(window);
var $menuDiv = $('#slide_0');
var $sizeFlag = 2;

function checkWidth() {
    var windowsize = $window.width();
    if (windowsize > 980) {
        {
            if ($sizeFlag == 0 || $sizeFlag == 2) {
                if ($sizeFlag == 2) {
                    sliderPauseOnMenu();
                    $sizeFlag = 1;
                } else if ($sizeFlag == 0) {

                    $sizeFlag = 1;
                    $('.slider').trigger('insertItem', $menuDiv); //Inserting element back
                    sliderPauseOnMenu();
                }
            }
        }
    } else if ($sizeFlag == 1) {
        $('.slider').trigger('removeItem', $menuDiv); //removing element
        $('.slider').trigger('play');
        $sizeFlag = 0;
    }

}
checkWidth();

$(window).resize(checkWidth);

sliderPauseOnMenu(); - 第一次暂停 slider 的功能，因为有一个菜单。

Answer 1

经过几个小时的研究，我得出了唯一的解决方案，您必须自己设置宽度。 CarouFredSel slider 监听调整大小事件，因为它是响应式的，并且 slider 元素首先调整大小 - 只有在所有触发的 Action 发生之后。因此，如果您必须在调整大小事件中添加任何元素 - 您将必须手动设置元素宽度。最简单的方法是复制相同级别的元素宽度:

var $menuDiv = $('#slide_0');
$('.slider').trigger('insertItem', $menuDiv);

var $slideWidth = $('#slide_1').width();
$menuDiv.css('width', $slideWidth);

现在这些都是神奇的。如果找到任何其他方式来完成这项工作 - 我会在这里分享。