This is a migrated thread and some comments may be shown as answers.

Rotator fade not working

2 Answers 122 Views

Rotator

This is a migrated thread and some comments may be shown as answers.

Mike_T asked on 03 Jun 2011, 08:35 AM

Hello,

I'm trying to embed the rotator as mentioned in the telerik examples, but it is not fading the images. The images are moving from right to left and they are not performing the fade effect even the sample is copy paste from the telerik samples.

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title></title>

<style type="text/css">

.rotatorBackground

{

float: left;

margin-left: 50px;

margin-top: 10px;

width: 440px;

height: 185px;

border: solid 2px #dedede;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

}

.rotatorStyle

{

margin: 40px auto 0px;

}

.rotatorStyle .RotatorItem

{

margin:5px;

height: 100px;

width: 100px;

}

.rotatorCarouselStyle

{

margin: 0px auto;

}

.RotatorItem

{

border: solid 1px #dff3ff !important;

}

.mainDiv

{

margin-bottom: 20px;

}

.configurationPanel

{

width: 290px;

border: 0px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="Server" Transparency="30"

EnableSkinTransparency="false" BackColor="#E0E0E0">

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxPanel ID="AjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1">

<div class="mainDiv">

<div class="rotatorBackground">

<telerik:RadRotator ID="RadRotator1" runat="server" Width="224px" Height="112px"

CssClass="rotatorStyle" ItemHeight="112" ItemWidth="112"

SlideShowAnimation-Type="Fade" SlideShowAnimation-Duration="3000" >

<Items>

<telerik:RadRotatorItem>

<ItemTemplate>

<asp:Image runat="server" ID="Image" ImageUrl='Img/Northwind/Customers/Thumbs/ANATR.jpg'

CssClass="RotatorItem" AlternateText="Customer Image" />

</ItemTemplate>

</telerik:RadRotatorItem>

<telerik:RadRotatorItem>

<ItemTemplate>

<asp:Image runat="server" ID="Image1" ImageUrl='Img/Northwind/Customers/Thumbs/ANTON.jpg'

CssClass="RotatorItem" AlternateText="Customer Image" />

</ItemTemplate>

</telerik:RadRotatorItem>

<telerik:RadRotatorItem>

<ItemTemplate>

<asp:Image runat="server" ID="Image2" ImageUrl='Img/Northwind/Customers/Thumbs/BOTTM.jpg'

CssClass="RotatorItem" AlternateText="Customer Image" />

</ItemTemplate>

</telerik:RadRotatorItem>

<telerik:RadRotatorItem>

<ItemTemplate>

<asp:Image runat="server" ID="Image3" ImageUrl='Img/Northwind/Customers/Thumbs/CACTU.jpg'

CssClass="RotatorItem" AlternateText="Customer Image" />

</ItemTemplate>

</telerik:RadRotatorItem>

<telerik:RadRotatorItem>

<ItemTemplate>

<asp:Image runat="server" ID="Image3" ImageUrl='Img/Northwind/Customers/Thumbs/CENTC.jpg'

CssClass="RotatorItem" AlternateText="Customer Image" />

</ItemTemplate>

</telerik:RadRotatorItem>

<telerik:RadRotatorItem>

<ItemTemplate>

<asp:Image runat="server" ID="Image3" ImageUrl='Img/Northwind/Customers/Thumbs/ERNSH.jpg'

CssClass="RotatorItem" AlternateText="Customer Image" />

</ItemTemplate>

</telerik:RadRotatorItem>

<telerik:RadRotatorItem>

<ItemTemplate>

<asp:Image runat="server" ID="Image3" ImageUrl='Img/Northwind/Customers/Thumbs/LAUGB.jpg'

CssClass="RotatorItem" AlternateText="Customer Image" />

</ItemTemplate>

</telerik:RadRotatorItem>

<telerik:RadRotatorItem>

<ItemTemplate>

<asp:Image runat="server" ID="Image3" ImageUrl='Img/Northwind/Customers/Thumbs/MAISD.jpg'

CssClass="RotatorItem" AlternateText="Customer Image" />

</ItemTemplate>

</telerik:RadRotatorItem>

<telerik:RadRotatorItem>

<ItemTemplate>

<asp:Image runat="server" ID="Image3" ImageUrl='Img/Northwind/Customers/Thumbs/MEREP.jpg'

CssClass="RotatorItem" AlternateText="Customer Image" />

</ItemTemplate>

</telerik:RadRotatorItem>

<telerik:RadRotatorItem>

<ItemTemplate>

<asp:Image runat="server" ID="Image3" ImageUrl='Img/Northwind/Customers/Thumbs/OCEAN.jpg'

CssClass="RotatorItem" AlternateText="Customer Image" />

</ItemTemplate>

</telerik:RadRotatorItem>

</Items>

</telerik:RadRotator>

</div>

</div>

</telerik:RadAjaxPanel>

</form>

</body>

</html>

Thanks for your help

2 Answers, 1 is accepted

0

Accepted

answered on 03 Jun 2011, 11:08 AM

Hello Mike,

Please, make sure you have defined the type of the RadRotator to be SlideShow. Only the SlideShow type of rotation takes advantage of the fade effect. Please, review the following help article for further information on the topic - http://www.telerik.com/help/aspnet-ajax/rotator-types.html.

Hope this helps.

Best wishes,
Niko
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0

Tags

Rotator

Asked by

Answers by