Cycle2显示从display none到display block的问题

Question

我有一个使用cycle2插件的旋转木马幻灯片页面

页面首先会有幻灯片显示：无，并会在用户点击按钮后显示。

问题是幻灯片显示彼此堆叠，因为它虽然显示的宽度为0，如下图所示

slideshow content stacking

如果我调整浏览器的大小，幻灯片将正确显示

我正在寻找一种方法来使用指定的html规范重新启动cycle2，或告诉cycle2它需要像浏览器调整大小时一样刷新。

simplified fiddle code

使用的代码（Umbraco）

            <div class="solutionButtonDescContent col-md-12" id="@buttonContent">    <span id="@carouselLeftID" class="carouselControlLeft"><</span>
                                        <span id="@carouselRightID" class="carouselControlRight">></span>              
                                        <div class="cycle-slideshow"
                                             data-cycle-fx=carousel
                                             data-cycle-timeout=10000
                                             data-cycle-carousel-visible=3
                                             data-cycle-carousel-fluid=true
                                             data-cycle-center-horz=true
                                             data-cycle-center-vert=true
                                             data-cycle-next="@carouselRight"
                                             data-cycle-prev="@carouselLeft"
                                             data-cycle-slides="> .@carouselID">
                                            @{
                                                foreach (var featureItems in item.Children)
                                                {
                                                    dynamic featureIcon = Umbraco.Media((int)featureItems.iconImage);
                                                    <div class="@carouselID">
                                                        <div class="row featureItemRow">
                                                            <div class="col-md-12">
                                                                <div class="row ">
                                                                    <div class="col-md-12">
                                                                        <img class="featureItemsIcon" src="@itemIcon.umbracoFile"  />
                                                                    </div>
                                                                    <div class="col-md-12 featureItemsName">
                                                                        @featureItems.Name
                                                                    </div>
                                                                    <div class="col-md-12 featureItemsDescription">
                                                                        @featureItems.description
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                }
                                            }
                                        </div>  
                                        </div>  

用于显示的jquery

$(".solutionItemSummaryButton").click(function () {
    var content = $(this).attr("id") + "Content";

    $('#' + content).fadeToggle("fast", "linear");
});