Slide In with the images
Here is a little code that will get a slightly different effect. I worked this out before realizing that there was a fix for the Rotator.
<style type=
"text/css"
>
ul.rrClipRegion, ul.rrItemsList LI
{
float:none !important;
}
.horizontalRotator, .rrClipRegion, .rrItemsList, .rrRelativeWrapper
{
height:auto !important;
}
</style>
<script type=
"text/javascript"
>
var
currentItemIndex;
var
rotatorCount;
function
showing(sender, e) {
// update the currentItemIndex
switch
(sender._animationDirection) {
case
1:
currentItemIndex--;
currentItemIndex = (currentItemIndex + rotatorCount) % rotatorCount;
break
;
case
2:
currentItemIndex++;
currentItemIndex = currentItemIndex % rotatorCount;
break
;
default
:
// initialize the currentItemIndex
currentItemIndex = 0
break
;
}
// clear slides
for
(
var
i = 0; i < rotatorCount; i++) {
sender._items[i]._element.style.display =
"none"
;
}
// Show the correct slide.
sender._items[currentItemIndex]._element.style.display =
"block"
;
}
function
goToSlide(index) {
var
rotator = Sys.Application.findComponent(
'<%# RadRotator1.ClientID %>'
);
var
clicks = (index % rotatorCount) - (currentItemIndex % rotatorCount);
if
(clicks < 0) {
// move to the right.
clicks = Math.abs(clicks)
for
(
var
i = 0; i < clicks; i++) {
rotator._rightButton.click()
}
}
else
{
// move to the left.
for
(
var
i = 0; i < clicks; i++) {
rotator._leftButton.click()
}
}
}
function
rotatorLoaded(sender, e) {
rotatorCount = sender._items.length;
// set the initial slide.
showing(sender, e);
}
</script>