Question

我在wordpress主题中使用了Responsive CarouFredSel滑块。我在窗口宽度变化时移除并放回滑块元素（第一个滑块元素即菜单）：如果小于980像素，则移除，如果宽度超过980像素，则放回。所以在这一刻 - 一切正常。

问题出现时，插入的元素显示 - 它的宽度大小错误。 如何发生：我减少浏览器窗口大小，直到它低于980px（元素删除它应该），而不是按下＆＃39;最大化＆＃39;浏览器上的按钮，因此尺寸返回并达到了比将元素插回所需的更多。在那一刻，我想，CarouFredSel调整了所有元素的大小，除了我在插入调整大小时插入的元素。在调整大小之前，那个宽度与其他元素相同。因此，如果所有元素的宽度都是700像素，那么在浏览器最大化之后，每个人的宽度都达到了1335像素，除了我添加的一个 - 保持700px的大小。

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

这是一段代码：

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（）; - 第一次暂停滑块的功能，cus有一个菜单。

Answer 1

经过几个小时的研究，我只得到解决方案，你必须自己设定宽度。 CarouFredSel滑块侦听调整大小事件，因为它响应，并且滑块元素首先调整大小 - 仅发生所有触发的操作。因此，如果您必须在resize事件上添加任何项目 - 您必须手动设置元素宽度。最简单的方法是复制相同级别的元素宽度：

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

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

现在这一切都很神奇。如果找到任何其他方式来获得这项工作 - 我会在这里分享。

触发器insertItem上的CarouFredSel项宽度问题

1 个答案: