Vaibhav Choudhary
An Easy Image Carousel
With the JavaFX technology it is easy to build your own customized carousel with a simple graphics operation and binding.
Understanding the Code
The code shown in Figure 1 creates a carousel. Most of the drawing is based on public attributes, enabling you to easily customize the look by changing a few settings.
Source Code
...
children = [
ImageView {
x: bind X
y: bind Y
scaleX: bind scale
scaleY: bind scale
opacity: bind local_opacity
image: bind image
cursor: Cursor.DEFAULT
blocksMouse: true
}
]
}
public function update(i: Number,angle: Number): Void {
Z=Math.sin(angle + i * image_gap + shift) * radius + zcenter ;
if (__PROFILE__ == "tv") {
local_opacity = fl / (fl + Z);
scale = 3 * fl / (fl + Z);
} else {
local_opacity = fl / (fl + Z);
scale = fl / (fl + Z);
}
X= Math.cos(angle + i * image_gap + shift) * radius_x + xcenter;
Y= -Math .sin(angle + i * image_gap + shift) * radius_y + ycenter ;
}
...
Figure 1: Carousel.fx Class
Changing the data member like dur in Main.fx, enables you to make the animation slower or faster.
Source Code
var dur: Duration = 15ms;
Figure 2: Changing the Animation
Customizing the Code
To further customize the carousel, you can use your own image of 100 X 100 pixels by changing the image String array.
Source Code
var im:String[] = [
"{__DIR__}im1.PNG",
"{__DIR__}im2.PNG",
"{__DIR__}im3.PNG",
"{__DIR__}im4.PNG",
"{__DIR__}im5.PNG",
"{__DIR__}im6.PNG"
];
Figure 3 shows the changed attributes in Main.fx of Carousel.
Figure 3: Carousel with Different Images