Autoscroll slideshow using jquery in Asp.net control or slide show using Repeater or Datalist Control

Introduction

Here i share my code to create a horizontal slide show using jquery...

Description:

when u get find any jquery code they give example with only static images..But now here i get the image from the database. Also here i use asp.net control to slideshow the images.

we all store the images only in database..Then its very easy to keep and find the images..

This is auto scroll slide show for an every three seconds its will change the images smoothly..

Here i gave the jquery file with url..so you can easily download and merge the file with your project...

Also you can use data list control instead of repeater control..

Here i store only the image path in database...For yours customize store images as byte in database and retrieve bind it image control...

By using Next and Previous button you can change the images in slide show....

<link href="http://sorgalla.com/projects/jcarousel/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script> <link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" /> <script type="text/javascript">     function mycarousel_initCallback(carousel) {         // Disable autoscrolling if the user clicks the prev or next button.         carousel.buttonNext.bind('click', function() {             carousel.startAuto(0);         });         carousel.buttonPrev.bind('click', function() {             carousel.startAuto(0);         });         // Pause autoscrolling if the user moves with the cursor over the clip.         carousel.clip.hover(function() {             carousel.stopAuto();         }, function() {             carousel.startAuto();         });     };     jQuery(document).ready(function() {     jQuery('#mycarousel').jcarousel({                   auto: 2,             wrap: 'last',             initCallback: mycarousel_initCallback         });     }); </script>

Sample image:

<div id="Div1">                                    <asp:Repeater ID="dlNews" runat="server">                               <HeaderTemplate>                                      <ul id="mycarousel" class="jcarousel-skin-tango">                         </HeaderTemplate>                                                <ItemTemplate>                                                      <li>                                                          <a href=" " title ='<%#Eval("TIT")%>'><asp:Image ID="imglst" runat="server" ImageUrl='<%#Eval("src") %>'                                                                                                                       Width="80" Height="80" />  </a>                                             </li>                                                   </ItemTemplate>                                                  <FooterTemplate>                                                 </ul>                                            </FooterTemplate>                                                                     </asp:Repeater>                                                                 </div>

In Code get the file bind into repeater control…

Demo

I hope you learn something useful ..post your comment here….