Button - Slide Show

  • Kawasaki Ninja 250R
    Kawasaki Ninja 250R
    open quotation Nimble handling, an exceptional personality and a low price tag highlight Kawasaki's Ninja® 250R sportbike, while its UNI-TRAK® rear suspension, petal disc brakes and gas-sipping twin-cylinder engine contribute to its class leading performance and value. Its no surprise the Ninja 250R is such a strong seller.
  • Kawasaki Ninja 500R
    Kawasaki Ninja 500R
    open quotation Practicality is the Kawasaki's Ninja® 500Rs biggest asset as it strikes an ideal balance between function, form and budget that's rarely achieved in the sport bike world. A sensible sportbike, the 500R is ready to rip, yet remains friendly enough for beginners to feel confident in its manners.
  • Kawasaki Ninja 650R
    Kawasaki Ninja 650R
    open quotation The Kawasaki Ninja® 650R already epitomized the ideal marriage of sportbike performance and relaxed comfort. For 2009 Kawasaki improved on this combination and gave this popular model several new upgrades, from improved suspension to updated Ninja super sport styling. The end result of over 40 updates and refinements, the new sportier Ninja 650R delivers serious performance fun and maximum transportation practicality.
  • Kawasaki ER-6n
    Kawasaki ER-6n
    open quotation Riders seeking the performance and practicality of Kawasaki's popular Ninja® 650R sportbike, but desiring something with a tougher, more muscular image need look no farther than the new 2009 Kawasaki ER-6n. Sharing mechanicals with the Ninja 650R, but with street-smart styling that reveals its trellis frame and compact parallel-twin engine, the ER-6n offers a unique blend of stunning good looks combined with nimble handling and a comfortable riding position. The ER-6n has all the performance of its Ninja sibling, in a new and distinctive guise.
  • Kawasaki Z1000
    Kawasaki Z1000
    open quotation Kawasaki upped the ante in the naked bike arena with the entrance of the Z1000. Beyond its muscular torque delivery and radical styling, the Z1000 dishes out a visceral riding experience. This purpose-built Kawasaki is equally at home in the garages of both practical motorcyclists simply seeking a smile-producing weekend ride and owners desiring a bike that doesn't fit the norm.
    
Paused
Last action: Pause
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates how to use different types of RadButtons and their client-side API to control various actions on the page.

The Play/Pause button is actually a check box with images, and scrolls the slides when its Checked property is "true".

The other two buttons (Next and Previous which also use images) pause the slide show by unchecking the Play/Pause check box, and show the next or the previous slide.

Calling the set_checked(true/false) method fires the OnClientCheckedChanged client-side event. This comes handy in scenarios when you want to programmatically change the checked state of a given RadButton, but still execute the logic as if the state was changed by clicking the control.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="slideshow">
        <div class="shimg">
            <div class="slides">
                <!-- slides -->
                <telerik:RadRotator RenderMode="Lightweight" ID="rotatorSlideShow" runat="server" Width="690px" Height="371px"
                    ItemHeight="371px" ItemWidth="690px" ScrollDirection="Right" RotatorType="FromCode"
                    PauseOnMouseOver="false" OnClientLoad="telerikDemo.saveRotatorInstance">
                    <Items>
                        <telerik:RadRotatorItem CssClass="slide">
                            <ItemTemplate>
                                <div id="slide_00" class="slide">
                                    <h6>
                                        Kawasaki Ninja 250R</h6>
                                    <div class="slideContent">
                                        <img src="images/ninja-250-r.jpg" alt="Kawasaki Ninja 250R" title="Kawasaki Ninja 250R"
                                            width="251px" height="164px" style="float: left;" />
                                        <div class="Motor_Description">
                                            <img alt="open quotation" src="images/quotmark-left.gif" />
                                            Nimble handling, an exceptional personality and a low price tag highlight Kawasaki's
                                            Ninja&reg; 250R sportbike, while its UNI-TRAK&reg; rear suspension, petal disc brakes
                                            and gas-sipping twin-cylinder engine contribute to its class leading performance
                                            and value. Its no surprise the Ninja 250R is such a strong seller.</div>
                                    </div>
                                </div>
                            </ItemTemplate>
                        </telerik:RadRotatorItem>
                        <telerik:RadRotatorItem CssClass="slide">
                            <ItemTemplate>
                                <div id="slide_01" class="slide">
                                    <h6>
                                        Kawasaki Ninja 500R</h6>
                                    <div class="slideContent">
                                        <img src="images/ninja-500-r.jpg" alt="Kawasaki Ninja 500R" title="Kawasaki Ninja 500R"
                                            width="251px" height="164px" style="float: left;" />
                                        <div class="Motor_Description">
                                            <img alt="open quotation" src="images/quotmark-left.gif" />
                                            Practicality is the Kawasaki's Ninja&reg; 500Rs biggest asset as it strikes an ideal
                                            balance between function, form and budget that's rarely achieved in the sport bike
                                            world. A sensible sportbike, the 500R is ready to rip, yet remains friendly enough
                                            for beginners to feel confident in its manners.</div>
                                    </div>
                                </div>
                            </ItemTemplate>
                        </telerik:RadRotatorItem>
                        <telerik:RadRotatorItem CssClass="slide">
                            <ItemTemplate>
                                <div id="slide_02" class="slide">
                                    <h6>
                                        Kawasaki Ninja 650R</h6>
                                    <div class="slideContent">
                                        <img src="images/ninja-650-r.jpg" alt="Kawasaki Ninja 650R" title="Kawasaki Ninja 650R"
                                            width="251px" height="164px" style="float: left;" />
                                        <div class="Motor_Description">
                                            <img alt="open quotation" src="images/quotmark-left.gif" />
                                            The Kawasaki Ninja&reg; 650R already epitomized the ideal marriage of sportbike
                                            performance and relaxed comfort. For 2009 Kawasaki improved on this combination
                                            and gave this popular model several new upgrades, from improved suspension to updated
                                            Ninja super sport styling. The end result of over 40 updates and refinements, the
                                            new sportier Ninja 650R delivers serious performance fun and maximum transportation
                                            practicality.
                                        </div>
                                    </div>
                                </div>
                            </ItemTemplate>
                        </telerik:RadRotatorItem>
                        <telerik:RadRotatorItem CssClass="slide">
                            <ItemTemplate>
                                <div id="slide_03" class="slide">
                                    <h6>
                                        Kawasaki ER-6n</h6>
                                    <div class="slideContent">
                                        <img src="images/er6n.jpg" alt="Kawasaki ER-6n" title="Kawasaki ER-6n" width="251px"
                                            height="164px" style="float: left;" />
                                        <div class="Motor_Description">
                                            <img alt="open quotation" src="images/quotmark-left.gif" />
                                            Riders seeking the performance and practicality of Kawasaki's popular Ninja&reg;
                                            650R sportbike, but desiring something with a tougher, more muscular image need
                                            look no farther than the new 2009 Kawasaki ER-6n. Sharing mechanicals with the Ninja
                                            650R, but with street-smart styling that reveals its trellis frame and compact parallel-twin
                                            engine, the ER-6n offers a unique blend of stunning good looks combined with nimble
                                            handling and a comfortable riding position. The ER-6n has all the performance of
                                            its Ninja sibling, in a new and distinctive guise.
                                        </div>
                                    </div>
                                </div>
                            </ItemTemplate>
                        </telerik:RadRotatorItem>
                        <telerik:RadRotatorItem CssClass="slide">
                            <ItemTemplate>
                                <div id="slide_04" class="slide">
                                    <h6>
                                        Kawasaki Z1000</h6>
                                    <div class="slideContent">
                                        <img src="images/z1000.jpg" alt="Kawasaki Z1000" title="Kawasaki Z1000" width="251px"
                                            height="164px" style="float: left;" />
                                        <div class="Motor_Description">
                                            <img alt="open quotation" src="images/quotmark-left.gif" />
                                            Kawasaki upped the ante in the naked bike arena with the entrance of the Z1000.
                                            Beyond its muscular torque delivery and radical styling, the Z1000 dishes out a
                                            visceral riding experience. This purpose-built Kawasaki is equally at home in the
                                            garages of both practical motorcyclists simply seeking a smile-producing weekend
                                            ride and owners desiring a bike that doesn't fit the norm.
                                        </div>
                                    </div>
                                </div>
                            </ItemTemplate>
                        </telerik:RadRotatorItem>
                    </Items>
                </telerik:RadRotator>
            </div>
        </div>
        <div class="controls">
            <div id="divState" style="color: Red;" class="sshow">
                Paused</div>
            <div class="crtl">
                <span style="color: #2b8fec; font-size: 15px; font-weight: normal;">Last action:&nbsp;</span><span
                    id="spanLastAction">Pause</span></div>
            <ul class="ctrlBtns">
                <li>
                    <telerik:RadButton RenderMode="Lightweight" Skin="Metro" ID="RadButton5" runat="server" Width="19px" Height="21px" CssClass="raw"
                        AutoPostBack="false" Text="Play Previous" OnClientClicked="telerikDemo.showNextItem" CommandName="Left">
                        <Image ImageUrl="images/shRaw.png" HoveredImageUrl="images/shRawHov.png"></Image>
                    </telerik:RadButton>
                </li>
                <li class="playSpace">
                    <telerik:RadButton RenderMode="Lightweight" Skin="Metro" ID="PlayPause" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"
                        Width="17px" Height="21px" AutoPostBack="false" OnClientCheckedChanged="telerikDemo.OnClientCheckedChanged " OnClientLoad="telerikDemo.savePlayPauseInstance">
                        <ToggleStates>
                            <telerik:RadButtonToggleState ImageUrl="images/shPlay.png" HoveredImageUrl="images/shPlayHov.png"
                                CssClass="play"></telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState ImageUrl="images/shPause.png" HoveredImageUrl="images/shPauseHov.png"
                                Selected="true" CssClass="pause"></telerik:RadButtonToggleState>
                        </ToggleStates>
                    </telerik:RadButton>
                </li>
                <li>
                    <telerik:RadButton RenderMode="Lightweight" Skin="Metro" ID="RadButton1" runat="server" Width="19px" Height="21px" CssClass="ff"
                        AutoPostBack="false" Text="Play Next" CommandName="Right" OnClientClicked="telerikDemo.showNextItem">
                        <Image ImageUrl="images/shFF.png" HoveredImageUrl="images/shFFHov.png"></Image>
                    </telerik:RadButton>
                </li>
            </ul>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?