Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

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 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 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 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 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 ER-6n
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 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 doesnt fit the norm.

  • SlideShow

    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.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Slider.SlideShow.DefaultVB" CodeFile="DefaultVB.aspx.vb"%>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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">
            <qsf:headtag id="Headtag1" runat="server"/>
            <style type="text/css">
            /* common settingts */
            .slideshowviewer,
            .slides,
            .navigation,
            .navigation a
            {
         background: transparent url('Images/Sprite.gif') no-repeat;
         -moz-user-select: none;
         outline: none;
            }
            /* end of common settingts */

            .slideshowviewer
            {
         width: 747px;
         height: 472px;
         cursor: default;
         padding: 5px 0 0 0;
         font-family: "Segoe UI", "Trebuchet MS", Arial, Verdana;
            }

            .slides
            {
         width: 737px;
         height: 381px;
         margin: 0 0 0 5px;
         background-position: 0 -477px;    
            }

            /* single slide settings */
            .slide
            {
         width: 737px;
         height: 381px;
         /* We will show the slides with javascript */
         display:none;
            }

            .slide h6
            {
         padding: 0;
         margin: 0;
            }

            .slide h6
            {
         font-size: 47px;
         font-weight: normal;
         color: white;
         padding: 50px 0 0 44px;
            }

            .slide ul
            {
         color: #272727;
         font-size: 24px;
         margin: 48px 0 0 130px;
            }

            /* control buttons settings */
            .navigation
            {
         width: 182px;
         height: 24px;
         margin: 7px 0 7px 276px;
         background-position: 0 -858px;
            }

            .navigation ul,
            .navigation li
            {
         padding: 0;
         margin: 0;
         list-style: none;
            }

            .navigation li
            {
         float: left;
            }

            .navigation a
            {
         display: block;
         text-indent: -9999px;
         height: 24px;
         width: 24px;
            }

            .navigation .previous
            {
         background-position: 0 -882px;
         margin-left: 55px;
            }

            .navigation .play
            {
         background-position: -24px -882px;
            }

            .navigation .next
            {
         background-position: -48px -882px;
            }
            
            .navigation .stop
            {
         background-position: -72px -882px;
            }
            
            /* Customize slider items look */
            .RadSlider .rslItemsWrapper .rslItem span
            {
                line-height:22px;
                color:#5E5E5E;
            }
            
            .RadSlider .rslItemsWrapper .rslItemSelected span
            {
                color:#fff;
            }
            
            /* Slides content */
            .slide .slideContent
            {
                height:200px;
                width:700px;
                clear: both;
                margin-top:48px;
                margin-left:20px;
            }
            
            .slide .Motor_Description
            {
                height:164px;
                width:400px;
                padding-top:25px;
                float:right;
            }
            
            /* RadSlider */
            .sliderWrapper
            {
                margin-left:5px;
            }
            </style>
        </head>
        <body class="BODY">
            <form id="Form1" method="post" runat="server">
                <qsf:header id="Header1" runat="server" ShowSkinChooser="false" NavigationLanguage="VB"/>
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

                <div class="slideshowviewer">
             <div class="slides">
                 <!-- slides -->
                 <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 Kawasakis 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>
                 <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 Kawasakis Ninja&reg; 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.</div>
                     </div>
                 </div>
                 <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 supersport 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>
                 <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 Kawasakis 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>
                 <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 doesnt fit the norm.
                                </div>
                     </div>
                 </div>
             </div>
             <div class="navigation">
                 <ul>
                     <li><a href="#" onclick="SelectPrevSlide(true); return false;" class="previous" title="Previous Slide"><span>Previous Slide</span></a></li>
                     <li><a href="#" id="playButton" onclick="TogglePlaySlideShow(this); return false;" class="play" title="Play Slideshow"><span>Play Slideshow</span></a></li>
                     <li><a href="#" onclick="SelectNextSlide(true); return false;" class="next" title="Next Slide"><span>Next Slide</span></a></li>
                 </ul>
             </div>
             <div class="sliderWrapper">
             <script type="text/javascript">
             var currentSlideNumber = 0;
             var slidesCount;
             var slideInterval = null;
            
             function UpdateVisibleSlide(sender, args)
             {
             var slider = sender;
             if(!slidesCount)
             {
             slidesCount = slider.get_items().length;
             }
            
             SelectSlide(slider.get_value());
             }
            
             function SelectSlide(slideNumber)
             {
             var currentSlide = $get('slide_0' + currentSlideNumber);
             if(currentSlide)
             {
             currentSlide.style.display = '';
             }
            
             currentSlideNumber = slideNumber;
             currentSlide = $get('slide_0' + currentSlideNumber);
             currentSlide.style.display = 'block';
             }
            
             function SelectPrevSlide(stopSlideShow)
             {
             if(stopSlideShow)
             {
             StopSlideShow();
             }
            
             var slider = $find('<%= RadSlider1.ClientID %>');
            
             var slideNumber = currentSlideNumber - 1;
             if(slideNumber == -1)
             {
             slideNumber = slidesCount - 1;
             }
            
             slider.set_value(slideNumber);
             SelectSlide(slideNumber);    
             }
            
             function SelectNextSlide(stopSlideShow)
             {
             if(stopSlideShow)
             {
             StopSlideShow();
             }
            
             var slider = $find('<%= RadSlider1.ClientID %>');
            
             var slideNumber = currentSlideNumber + 1;        
             if(slideNumber > (slidesCount - 1))
             {
             slideNumber = 0;
             }
            
             slider.set_value(slideNumber);
             SelectSlide(slideNumber);    
             }
            
             function StopSlideShow()
             {
             if(!slideInterval) return;
            
             TogglePlaySlideShow($get('playButton'));
             }
            
             function TogglePlaySlideShow(button)
             {                 
             var toEnable = false;
             if(button.title == 'Play Slideshow')
             {
             slideInterval = window.setInterval('SelectNextSlide()', 1000);    
                 
             button.title = 'Stop Slideshow';
             button.className = 'stop';
             }
             else if(button.title == 'Stop Slideshow')
             {
             toEnable = true;
            
             window.clearInterval(slideInterval);
             slideInterval = null;
            
             button.title = 'Play Slideshow';
             button.className = 'play';
             }
            
             var slider = $find('<%= RadSlider1.ClientID %>');
             slider.set_enabled(toEnable);
             slider.repaint();
             }        
             </script>
                 <telerik:RadSlider ID="RadSlider1" runat="server" TrackPosition="TopLeft"
                 Value="0" ItemType="Item" Skin="Black" Width="738px" Height="40px"
                 OnClientValueChanged="UpdateVisibleSlide" OnClientLoad="UpdateVisibleSlide"
                 >
                 <Items>
                 <telerik:RadSliderItem Text="Kawasaki Ninja 250R" />
                 <telerik:RadSliderItem Text="Kawasaki Ninja 500R" />
                 <telerik:RadSliderItem Text="Kawasaki Ninja 650R" />
                 <telerik:RadSliderItem Text="Kawasaki ER-6n" />
                 <telerik:RadSliderItem Text="Kawasaki Z1000" />
                 </Items>
                 </telerik:RadSlider>
             </div>
         </div>

                <qsf:footer runat="server" id="Footer1"/>
            </form>
        </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451