Jquery Image slider in c# asp.net web page

Jquery Image Slider in c# asp.net web page:

download source code 
demo:

We can easily use  Jquery Image slider in asp.net page.It's a simple slider. Just copy the code bellow in your web page. Firstly add jquery and css link in header.

<!-- First, add jQuery (and jQuery UI if using custom animation -->

<script src="../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>

<!-- Second, add the Slider Control and Animation plugins -->
<script src="../Scripts/jquery.SliderControl.js" type="text/javascript"></script>
<script src="../Scripts/jquery.SliderAnimation.js" type="text/javascript"></script>

<!-- Third, add the GalleryView Javascript and CSS files -->
<link href="../Styles/jquery.ImageSliderGalleryview.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery.ImageSliderGalaryView.js" type="text/javascript"></script>

Now take a unorderedlist in body tag and placed your image into it.

<ul id="sliderImageGallery">
  <li>
     <img src="../images/slidingImage/1.jpg" alt="image1" title="Image Title" data-description="Image description" />
  </li>
  <li>
     <img src="../images/slidingImage/2.jpg" alt="image2" />
  </li>
  <li>
     <img src="../images/slidingImage/3.jpg" alt="image3" />
  </li>
  <li>
      <img src="../images/slidingImage/4.jpg" alt="image4" />
  </li>
  <li>
      <img src="../images/slidingImage/5.jpg" alt="image5" />
  </li>
</ul>

Now call Jquery slider plugin

<script type="text/javascript">
 $(function () {
 $('#sliderImageGallery').galleryView();
 });
</script>

Or you can also override this:

<script type="text/javascript">
 $(function () {
 $('#sliderImageGallery').galleryView({
  panel_width: 765,
  panel_height: 298,
  frame_width: 120,
  frame_height: 90
 });
 });
</script>

You can also modify other options provided by this plugin.Default plugin options are given bellow:

// General Options
transition_speed: 1000,         //INT - duration of panel/frame transition (in milliseconds)
transition_interval: 5000,      //INT - delay between panel/frame transitions (in milliseconds)
easing: 'swing',                //STRING - easing method to use for animations (jQuery provides 'swing' or 'linear', more available with jQuery UI or Easing plugin)

// Panel Options
show_panels: true,              //BOOLEAN - flag to show or hide panel portion of gallery
show_panel_nav: true,           //BOOLEAN - flag to show or hide panel navigation buttons
enable_overlays: false,             //BOOLEAN - flag to show or hide panel overlays
panel_width: 800,               //INT - width of gallery panel (in pixels)
panel_height: 400,              //INT - height of gallery panel (in pixels)
panel_animation: 'fade',        //STRING - animation method for panel transitions (crossfade,fade,slide,none)
panel_scale: 'crop',            //STRING - cropping option for panel images (crop = scale image and fit to aspect ratio determined by panel_width and panel_height, fit = scale image and preserve original aspect ratio)
overlay_position: 'bottom',     //STRING - position of panel overlay (bottom, top)
pan_images: false,              //BOOLEAN - flag to allow user to grab/drag oversized images within gallery
pan_style: 'drag',              //STRING - panning method (drag = user clicks and drags image to pan, track = image automatically pans based on mouse position
pan_smoothness: 15,             //INT - determines smoothness of tracking pan animation (higher number = smoother)

    // Filmstrip Options
start_frame: 1,                 //INT - index of panel/frame to show first when gallery loads
show_filmstrip: true,           //BOOLEAN - flag to show or hide filmstrip portion of gallery
show_filmstrip_nav: true,       //BOOLEAN - flag indicating whether to display navigation buttons
enable_slideshow: true,         //BOOLEAN - flag indicating whether to display slideshow play/pause button
autoplay: false,                //BOOLEAN - flag to start slideshow on gallery load
show_captions: false,           //BOOLEAN - flag to show or hide frame captions 
filmstrip_size: 3,              //INT - number of frames to show in filmstrip-only gallery
filmstrip_style: 'scroll',      //STRING - type of filmstrip to use (scroll = display one line of frames, scroll filmstrip if necessary, showall = display multiple rows of frames if necessary)
filmstrip_position: 'bottom',   //STRING - position of filmstrip within gallery (bottom, top, left, right)
frame_width: 80,                //INT - width of filmstrip frames (in pixels)
frame_height: 40,               //INT - width of filmstrip frames (in pixels)
frame_opacity: 0.4,             //FLOAT - transparency of non-active frames (1.0 = opaque, 0.0 = transparent)
frame_scale: 'crop',            //STRING - cropping option for filmstrip images (same as above)
frame_gap: 5,                   //INT - spacing between frames within filmstrip (in pixels)

    // Info Bar Options
show_infobar: true,             //BOOLEAN - flag to show or hide infobar
infobar_opacity: 1              //FLOAT - transparency for info bar

download source code and try to implement.Thank you.