jQuery插件在window.resize之后无法正常工作，但是在刷新整页后仍然可以正常工作

Question

I'm implementing a jquery carousel into my page. Because I have used percentage units rather than fixed units, I need to redraw the carousel after window resize.

My problem is that the carousel stops to work correctly and its function call does not behave normally and renders the carousel oddly after resizing using the following code:

jQuery(document).ready(function ($) {
                FnUpdateCarousel();                                                                                         
            }); // end ready    

            var lightbox_resize = false;
            $(window).resize(function() {
                if (lightbox_resize)
                    clearTimeout(lightbox_resize);
                lightbox_resize = setTimeout(function() {
                    FnUpdateCarousel(); 
                }, 100);
            });                                         

            function FnUpdateCarousel() {
                    var widthof = 
                    Math.round(parseInt(jQuery('#services-example-1').css('width'))-(45));
                    jQuery('#services-example-1').services(
                        {
                            width:widthof,
                            height:290,
                            slideAmount:6,
                            slideSpacing:30,
                            touchenabled:"on",
                            mouseWheel:"on",
                            hoverAlpha:"off",
                            slideshow:3000,
                            hovereffect:"off"
                        });
                };

Please guide me on how can I make it behave normally.

Answer 1

Here is the solution I reached:

<script type="text/javascript">
            var initialContent = jQuery('#services-example-1').html();
            jQuery(document).ready(function ($) {
                FnUpdateCarousel();                                                                                         
            }); // end ready    

            var lightbox_resize = false;
            $(window).resize(function() {
                if (lightbox_resize)
                    clearTimeout(lightbox_resize);
                lightbox_resize = setTimeout(function() {
                    jQuery('#services-example-1').empty();
                    jQuery('#services-example-1').html(initialContent);
                    FnUpdateCarousel();
                }, 200);
            });                                         

            function FnUpdateCarousel() {
                    var widthof = 
                    Math.round(parseInt(jQuery('#services-example-1').css('width'))-(45));
                    jQuery('#services-example-1').services(
                        {
                            width:widthof,
                            height:290,
                            slideAmount:6,
                            slideSpacing:30,
                            touchenabled:"on",
                            mouseWheel:"on",
                            hoverAlpha:"off",
                            slideshow:3000,
                            hovereffect:"off"
                        });
                };
            </script>