Initially Hidden Rotator Does Not Show

An initially hidden rotator that you show with CSS (e.g., @media query and a browser resize—Example 2) does not show up and still stays collapsed, or does not change its items.

This happens because the initial state of the element was hidden and the control cannot calculate the animations.

To fix this, call the repaint client-side method after you show it. Example 1 shows a basic JavaScript function you can use.

Example 1: How to repaint all rotator instances on a page when needed

function repaintRotator() {
    $telerik.$(".RadRotator").each(function (index, elem) {//get all rotators
        //check if it is visible before repainting + defensive checks to ensure errors are not thrown
        if (elem && elem.control && $telerik.$(elem).is(":visible") && elem.control.repaint) {
            elem.control.repaint();
        }
    });
}

Example 2: Increasing the size of the browser causes the rotator not to be shown, so you should repaint it

<telerik:RadPageLayout runat="server" ID="ContentPageLayout">
    <Rows>
        <telerik:LayoutRow>
            <Columns>
                <telerik:LayoutColumn HiddenMd="true" HiddenSm="true" HiddenXs="true" Span="8">
                    <telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" runat="server" RotatorType="AutomaticAdvance" ScrollDuration="500" FrameDuration="100" ItemWidth="655px" ItemHeight="320px" Width="655px" Height="320px" ScrollDirection="Left">
                        <Items>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
                                    first item
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
                                    second item
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                        </Items>
                    </telerik:RadRotator>
                </telerik:LayoutColumn>
                <telerik:LayoutColumn HiddenMd="false" HiddenSm="false" HiddenXs="false" Span="4">
                    start your browser small and maximize it
                </telerik:LayoutColumn>
            </Columns>
        </telerik:LayoutRow>
    </Rows>
</telerik:RadPageLayout>
<script>
    function repaintRotator() {
        $telerik.$(".RadRotator").each(function (index, elem) {//get all rotators
            //check if it is visible before repainting + defensive checks to ensure errors are not thrown
            if (elem && elem.control && $telerik.$(elem).is(":visible") && elem.control.repaint) {
                elem.control.repaint();
            }
        });
    }

    var TO = false;

    $telerik.$(window).resize(function () {
        if (TO !== false)
            clearTimeout(TO);
        TO = setTimeout(repaintRotator, 200); //200 is time in milliseconds
    });
</script>