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>