javascript - 在窗口调整大小时重新加载 jQuery Carousel 以将方向从垂直更改为水平

Question

我正在为响应式布局创建画廊 - 我正在使用 jQuery Riding Carousels对于缩略图。

当窗口大小调整为小于 1024px 时，轮播的方向需要从垂直变为水平......

我目前是这样做的:

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('#mycarousel').jcarousel({
    vertical: $(window).width() > 1008,
    scroll: 3,
  });
});
</script>

...JS 只是连接了一个类，但如果您通过拖动它来调整浏览器窗口的大小，它不会这样做 - 您需要刷新页面。

有没有办法销毁脚本并即时重新初始化它？

Answer 1

请检查工作示例:http://codebins.com/bin/4ldqpba/1/Jcarousel%20vertical%20on%20resize 在所有浏览器中测试并且工作正常。赏金是我的:) 在示例中，我给出了宽度为 350 的阈值，您可以通过调整结果 Pane 的大小来测试它，一旦您开始使用水平滚动条，它就会转换为垂直滚动条。

根据您的要求，1 个可能的问题是，如果您对图像有任何处理程序，它们将在更改显示方式后消失。它的解决方案是将您的#mycarousel 包装在一个 div 中，并使用 Jquery 委托(delegate)来处理包装器上的事件，因此事件也没有问题。 如果您遇到这种情况，请告诉我。

以下代码完全符合您的需要。

当窗口大小调整为小于 1024px 时，轮播的方向需要从垂直更改为水平。

这是对我来说相反的例子，如果宽度较小使其垂直则更有意义。

jQuery(document).ready(function() {
    var widthCheck = 1008;
    var resizeTimer = null,
        verticalFlg = $(window).width() > widthCheck;
    var obj = jQuery('#mycarousel').clone();
    $('#mycarousel').jcarousel({
        vertical: verticalFlg,
        scroll: 2
    });
    jQuery(window).resize(function() {
        resizeTimer && clearTimeout(resizeTimer); // Cleraring old timer to avoid unwanted resize calls.
        resizeTimer = setTimeout(function() {
            var flg = ($(window).width() > widthCheck);
            if (verticalFlg != flg) {
                verticalFlg = flg;
                $('#mycarousel').closest(".jcarousel-skin-tango").replaceWith($(obj).clone());
                $('#mycarousel').jcarousel({
                    vertical: verticalFlg,
                    scroll: 2
                });
            }
        }, 200);
    });
})