Jquery plugin stops working correctly after window.resize, but works well after full page refresh

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>