ASPxImageSlider – Resize slider for different devices

This code sample shows how to resize the ASPxImageSlider control for different devices and screen resizing. (thing rotating your tablet). The slider exposes a client side ID (ClientInstanceName = “imageSlider”) which can be hooked into with a little javascript. While this solves the basic problem, of having the slider react to different screen sizes, you are basically forced to operate with maximum size images, and have the control crop the images back to the smaller sizes you want to support.

<script type="text/javascript">
    (function() {
        function resizeSlider() {
            var ratio = 1.5;
            var slider = eval("imageSlider");
            slider.SetHeight(slider.GetWidth() / ratio);
        }
        window.addEventListener("resize",
            function(evt) {
                resizeSlider();
            });
        window.resizeSlider = resizeSlider;
    })();
</script>
<dx:ASPxImageSlider BackColor="#E32041" ClientInstanceName="imageSlider" EnableTheming="False" EnableViewState="False" ID="ASPxImageSlider1" ImageSourceFolder="/d/img/slidersmall" runat="server" Width="100%">
    <SettingsBehavior EnablePagingByClick="False" EnablePagingGestures="False"/>
    <SettingsImageArea EnableLoopNavigation="True" ImageSizeMode="FillAndCrop" NavigationButtonVisibility="None"/>
    <SettingsNavigationBar Mode="Dots"></SettingsNavigationBar>
    <SettingsSlideShow AutoPlay="True" Interval="5000"></SettingsSlideShow>
    <SettingsAutoGeneratedImages ImageCacheFolder="~\Cache\"/>
    <Styles>
        <ImageArea Width="100%"></ImageArea>
        <NavigationBarDotsModeBottom CssClass="startPageSliderHidden"></NavigationBarDotsModeBottom>
    </Styles>
    <ClientSideEvents Init="resizeSlider"/>
</dx:ASPxImageSlider>