Slider - Slide Show

Kawasaki Ninja 250R
Kawasaki Ninja 250R
open quotation Nimble handling, an exceptional personality and a low price tag highlight Kawasakis Ninja® 250R sportbike, while its UNI-TRAK® rear suspension, petal disc brakesand gas-sipping twin-cylinder engine contribute to its class leading performanceand value. Its no surprise the Ninja 250R is such a strong seller.
Kawasaki Ninja 500R
Kawasaki Ninja 250R
open quotation Practicality is the Kawasakis Ninja® 500Rs biggest asset as it strikes an ideal balance between function, form and budget thats 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 250R
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 supersport 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 Ninja 250R
open quotation Riders seeking the performance and practicality of Kawasakis 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 Ninja 250R
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 doesnt fit the norm.
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
This example demonstrates how you can use the RadSlider control to change the currently displayed slide. You can use the client API of the control to check the new value of the slider as soon as it changes and update the index of the visible slide.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" 
    CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Slider.SlideShow.DefaultCS" %>

<!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="demo-container size-wide no-bg">
        <div class="slideshowviewer">
            <div class="slides">
                <asp:Repeater runat="server" ID="RepeaterMotors">
                    <ItemTemplate>
                        <div class="slide">
                            <h6><%# Eval("model") %></h6>
                            <div class="slideContent">
                                <img src='<%# Eval("imageSrc") %>' alt="Kawasaki Ninja 250R" title='<%# Eval("model") %>'
                                    width="251px" height="164px" style="float: left;" />
                                <div class="motorDescription">
                                    <img alt="open quotation" src="Images/quotmark-left.gif" />
                                    <%# Eval("description") %>
                                </div>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
            <div class="navigation">
                <ul>
                    <li><a href="#" onclick="demo.selectPrevSlide(true); return false;" class="previous" title="Previous Slide">
                        <span>Previous Slide</span></a></li>
                    <li><a href="#" id="playButton" onclick="demo.togglePlaySlideShow(this); return false;"
                        class="play" title="Play Slideshow"><span>Play Slideshow</span></a></li>
                    <li><a href="#" onclick="demo.selectNextSlide(true); return false;" class="next" title="Next Slide">
                        <span>Next Slide</span></a></li>
                </ul>
            </div>
            <div class="sliderWrapper">
                <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider1" runat="server" TrackPosition="TopLeft" Value="0"
                    ItemType="Item" Skin="Black" Width="738px" Height="40px" OnClientValueChanged="demo.selectSlide"
                    OnClientLoad="demo.sliderClientLoad">
                    <ItemBinding TextField="model" />
                </telerik:RadSlider>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?