jQuery Awkward Slider Not working when using with asp.net webform

I am using following Awkward slider to show images for article (link). I have modified CSS to change the design & same works well when i use it as an HTML page.

But when i try to use it with an asp.net web form it doesn't work for some reason. May be i am missing something small which i am not able to figure over from last few hours.

I have uploaded HTML source of .aspx page with some change to path for online script & dummy images source code example on jsFiddle Link

I actually need to use it as a Asp.net User Control which is not working so i created a simple test.aspx page with user repeater control to read images & image caption & so on..

HTML code looks fine but for some reason script is not working as a hole.

I would appreciate help in this regard.

It looks good in xyz.html page screen shot

enter image description here

Actual OUTPUT from simple .aspx page..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <link href="../styles/english_css.css" rel="stylesheet" type="text/css" /><link href="../styles/english-article-images.css" rel="stylesheet" type="text/css" />
    <script src="../scripts/jquery.aw-showcase.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#showcase").awShowcase(
        {
            content_width: 500,
            content_height: 333,
            fit_to_parent: false,
            auto: false,
            interval: 3000,
            continuous: false,
            loading: true,
            tooltip_width: 200,
            tooltip_icon_width: 32,
            tooltip_icon_height: 32,
            tooltip_offsetx: 18,
            tooltip_offsety: 0,
            arrows: true,
            buttons: true,
            btn_numbers: true,
            keybord_keys: true,
            mousetrace: false, /* Trace x and y coordinates for the mouse */
            pauseonover: true,
            stoponclick: false,
            transition: 'fade', /* hslide/vslide/fade */
            transition_delay: 0,
            transition_speed: 500,
            show_caption: 'onload', /* onload/onhover/show */
            thumbnails: false,
            thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
            thumbnails_direction: 'vertical', /* vertical/horizontal */
            thumbnails_slidex: 1, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
            dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
            speed_change: true, /* Set to true to prevent users from swithing more then one slide at once. */
            viewline: false, /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
            custom_function: null /* Define a custom function that runs on content change */
        });
    });

</script>
</head>
<body>
    <form method="post" action="test.aspx?PageID=5&amp;Language=en-US&amp;ParID=5&amp;Issue=5&amp;cid=1&amp;aid=17" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTkzOTY1NzA2MmRkXNTZuzSOi9aAjH5HEUpSpesn2ls=" />
</div>

    <div>

<div id="article-gallery-wrapper" style="width: 500px; margin: auto;">

    <div id="showcase" class="showcase">
        <div class="showcase-slide">
            <div class="showcase-content">
                <img id="rptArticleGallery_imgArticle2x3Image_0" class="showcase-image" src="../images/article/92b2298b-b2bb-446a-91c9-449c10053dcc.png" />
            </div>
            <div class="showcase-caption">
                <span id="rptArticleGallery_lblImageCaption_0">Belarus is open for business</span>
            </div>
        </div>
    </div>

    <div id="showcase" class="showcase">
        <div class="showcase-slide">
            <div class="showcase-content">
                <img id="rptArticleGallery_imgArticle2x3Image_1" class="showcase-image" src="../images/article/gallery/4543a290-6472-4e55-a1d9-6ad5be90802d.jpg" />
            </div>
            <div class="showcase-caption">
                <span id="rptArticleGallery_lblImageCaption_1">Caption of image</span>
            </div>
        </div>
    </div>

    <div id="showcase" class="showcase">
        <div class="showcase-slide">
            <div class="showcase-content">
                <img id="rptArticleGallery_imgArticle2x3Image_2" class="showcase-image" src="../images/article/gallery/79a30652-26ee-4cbf-a991-0f23fa7a33f5.jpg" />
            </div>
            <div class="showcase-caption">
                <span id="rptArticleGallery_lblImageCaption_2">Caption of image</span>
            </div>
        </div>
    </div>

</div>

    </div>


    </form>
</body>
</html>

Solution

RESOLVED: I was using below div at wrong place fixed it by moving dive outside the repeater control. It was basic HTML mistake

<div id="showcase" class="showcase">

Final Code should look like this

 <div id="showcase" class="showcase">
        <div class="showcase-slide">
            <div class="showcase-content">
                <img id="rptArticleGallery_imgArticle2x3Image_0" class="showcase-image" src="../images/article/92b2298b-b2bb-446a-91c9-449c10053dcc.png" />
            </div>
            <div class="showcase-caption">
                <span id="rptArticleGallery_lblImageCaption_0">Belarus is open for business</span>
            </div>
        </div>

        <div class="showcase-slide">
            <div class="showcase-content">
                <img id="rptArticleGallery_imgArticle2x3Image_1" class="showcase-image" src="../images/article/gallery/4543a290-6472-4e55-a1d9-6ad5be90802d.jpg" />
            </div>
            <div class="showcase-caption">
                <span id="rptArticleGallery_lblImageCaption_1">Caption of image</span>
            </div>
        </div>

        <div class="showcase-slide">
            <div class="showcase-content">
                <img id="rptArticleGallery_imgArticle2x3Image_2" class="showcase-image" src="../images/article/gallery/79a30652-26ee-4cbf-a991-0f23fa7a33f5.jpg" />
            </div>
            <div class="showcase-caption">
                <span id="rptArticleGallery_lblImageCaption_2">Caption of image</span>
            </div>
        </div>
    </div>

</div>