Create a Paging Button for each slide in an ASP.NET AjaxControlToolkit SlideShowExtender

I had been searching for days for a way to have pretty little buttons for each slide in my slideshow extender.

Here is the always sexy nivo slider. Notice that you can have a bullet for each slide. Also, it would be cool if you could extend this guy to show tiles of the slides instead of just bullets.

 Here is what every other tutorial for the SlideShowExtender for the ASP.NET AjaxControlToolkit produced:

eeek! Try and sell that shit to a customer and see what happens.

So why not just use JQuery you might ask?

1. I don't believe in rewriting code that is already well designed. That is like wiping my ass with hard earned $100 bills.

2. The SlideShowExtender has some really cool functionality that I haven't found in the JQuery controls.

Regardless, here is how to extend the control to use paging buttons that you can easily customize to look as you please with CSS. I didn't do any pretty stuff here-- just the secret to making it work.

I am assuming that you already have your slideshow extender on the page and working as all the other 5000 tutorials on the subject show you how to do. Here is the key addition:

<div style="text-align: center; ">
          <div class="SlideShowMainTitle">
            <asp:Label ID="lblSlideTitle" runat="server"></asp:Label>
          </div>
          <div class="SlideShowImage">
            <asp:Image ID="imgSlide" runat="server" />
          </div>
          <div class="SlideShowSubTitle">            
                <asp:Label ID="lblSlideDescription" runat="server"></asp:Label>     <br />
                <asp:Repeater ID="rpPagingButtons" runat="server" OnItemDataBound="rpPagingButtons_OnItemDataBound">
                    <ItemTemplate>
                        <a ID="lbtnPager" runat="server"></a> 
                    </ItemTemplate>
                </asp:Repeater>   
          </div>
          
            <asp:SlideShowExtender ID="slExtender" runat="server" AutoPlay="true" Loop="true" PlayInterval="3000" TargetControlID="imgSlide"
                 ImageTitleLabelID="lblSlideTitle" ImageDescriptionLabelID="lblSlideDescription" SlideShowServiceMethod="GetSlides" SlideShowServicePath="~/WebServices/SlideShowService.asmx">
            </asp:SlideShowExtender>
          
        </div>        

Then in the code behind:

        protected void rpPagingButtons_OnItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemIndex > -1)
            {
                HtmlAnchor lbtnPageLink = (HtmlAnchor)e.Item.FindControl("lbtnPager");
 
                if (lbtnPageLink != null)
                {
                    string behaviorID = slExtender.BehaviorID;
 
                    lbtnPageLink.HRef = "javascript:$find('" + behaviorID + "')._currentIndex= " + e.Item.ItemIndex.ToString() + ";" +
                                                 " $find('" + behaviorID + "').setCurrentImage();";
                   
                    lbtnPageLink.InnerHtml = (e.Item.ItemIndex + 1).ToString();
                }
            }
        }
The key is in the href for the anchor tag. You will need to bind some data to your repeater. The dataset needs to have a row for each image in your slide show. I am assuming that you already are a decent programmer and know how to customize this to your own needs. Basically, set your bullet image in the css for the anchor tag in your repeater. You can do all of your formatting there.


Now go make daddy some bloody money.