Create a jQuery slideshow using database and a repeater in ASP.Net using

by Andy
Posted on October 2, 2012February 16, 2015

I needed to create a slideshow with jQuery in an ASP.Net page. I knew I could do it with a callback to the server, but this really seemed like a waste of resources. I didn’t really want to be calling the server every 10 seconds just to update. I wanted to get the information and I needed then just have jQuery loop through it. I searched for a while and found several ways to do this with static panels. The problem was I didn’t always know how many I items I would have and there may be extra information stored in a database that I would need to display.

Here is how I did it:

 <asp:Repeater runat="server" ID="rQuotes">
     <ItemTemplate>
         <div id='<%# "Image" + Eval("ORDERBY") %>' class="Quotes">
              <div style="position: absolute; top: 30px; left: 180px; padding-right: 12px;">
                  <p><%#Eval("Quote") %></p>
                  <div style="float: right; width: 255px; text-align: left; padding-top: 10px;">
                  <p><%#Eval("ExactAttribution") %></p>
              </div>

         </div>
         <div style="position: absolute; top: 20px; left: 40px; width: 120px;">
              <img src=' <%# "../Images/BookCovers/Full/" + Eval("ItemNumber") + ".png" %>' alt="" height="150" width="120" />
          </div>

      </ItemTemplate>
 </asp:Repeater>

<asp:Repeater runat="server" ID="rQuotes">

<div id='<%# "Image" + Eval("ORDERBY") %>' class="Quotes">

</div>

<img src=' <%# "../Images/BookCovers/Full/" + Eval("ItemNumber") + ".png" %>' alt="" height="150" width="120" />

</div>

</ItemTemplate>

</asp:Repeater>

I used the repeater to display all of the images. I could then jsut bind the data to the repeater and make only one trip to the server.

Ok then from there I just bound my data to the repeater on the page load. Then the jQuery to make it all happen:

$(document).ready(function () {
      var $divSlide = $('.Quotes');
      $divSlide.hide().eq(0).show();
      var panelCnt = $divSlide.length;
      setInterval(panelSlider, 15000);
      function panelSlider() {
            $divSlide.eq(($divSlide.length++) % panelCnt)
            .fadeOut("1600", function () {
                 $divSlide.eq(($divSlide.length) % panelCnt)
                .fadeIn("1000");
             });

      }
});

$(document).ready(function () {

var $divSlide = $('.Quotes');

$divSlide.hide().eq(0).show();

var panelCnt = $divSlide.length;

setInterval(panelSlider, 15000);

function panelSlider() {

$divSlide.eq(($divSlide.length++) % panelCnt)

.fadeOut("1600", function () {

$divSlide.eq(($divSlide.length) % panelCnt)

.fadeIn("1000");

});

}

});