Loading...
Loading...
Guides implementation of the Syncfusion WinForms Carousel control for creating 3D circular conveyors with rotating objects. Use this when creating interactive image galleries, product showcases, or 3D item displays with carousel paths. Covers image slides, rotation control, touch interactions, and visual customization.
npx skill4agent add syncfusion/winforms-ui-components-skills syncfusion-winforms-carouselInstall-Package Syncfusion.Tools.WindowsSyncfusion.Grid.BaseSyncfusion.Grid.WindowsSyncfusion.Shared.BaseSyncfusion.Shared.WindowsSyncfusion.Tools.BaseSyncfusion.Tools.Windowsusing System;
using System.Windows.Forms;
using Syncfusion.Windows.Forms.Tools;
namespace CarouselDemo
{
public partial class Form1 : Form
{
private Carousel carousel1;
public Form1()
{
InitializeComponent();
// Create Carousel
carousel1 = new Carousel();
carousel1.Size = new System.Drawing.Size(600, 400);
carousel1.Location = new System.Drawing.Point(50, 50);
// Create custom controls (e.g., buttons)
for (int i = 1; i <= 6; i++)
{
ButtonAdv button = new ButtonAdv();
button.Text = "Item " + i;
button.Size = new System.Drawing.Size(100, 80);
button.BackColor = System.Drawing.Color.FromArgb(22, 165, 220);
button.ForeColor = System.Drawing.Color.White;
// Add to both Controls and Items collections
carousel1.Controls.Add(button);
carousel1.Items.Add(button);
}
// Add to form
this.Controls.Add(carousel1);
}
}
}using Syncfusion.Windows.Forms.Tools;
// Enable image slides
carousel1.ImageSlides = true;
// Create and add images
for (int i = 1; i <= 6; i++)
{
CarouselImage carouselImage = new CarouselImage();
carouselImage.ItemImage = Image.FromFile($"Images/image{i}.png");
carousel1.ImageListCollection.Add(carouselImage);
}ImageSlides = trueImageListCollectionImageListFilePathControlsItemsPerspectiveTransitionSpeed// Create image-based carousel for product showcase
Carousel productCarousel = new Carousel();
productCarousel.ImageSlides = true;
productCarousel.CarouselPath = CarouselPath.Default;
productCarousel.Perspective = 4.5f;
productCarousel.TransitionSpeed = 2.0f;
productCarousel.ShowImagePreview = true;
productCarousel.ShowImageShadow = true;
// Add product images
foreach (string imagePath in Directory.GetFiles("Products", "*.jpg"))
{
CarouselImage img = new CarouselImage();
img.ItemImage = Image.FromFile(imagePath);
productCarousel.ImageListCollection.Add(img);
}
this.Controls.Add(productCarousel);// Create auto-rotating carousel with custom controls
Carousel dashboardCarousel = new Carousel();
dashboardCarousel.CarouselPath = CarouselPath.Orbital;
dashboardCarousel.RotateAlways = true;
dashboardCarousel.TransitionSpeed = 1.5f;
dashboardCarousel.Perspective = 3.0f;
// Add dashboard panels
Panel salesPanel = CreateDashboardPanel("Sales", salesData);
Panel inventoryPanel = CreateDashboardPanel("Inventory", inventoryData);
Panel reportsPanel = CreateDashboardPanel("Reports", reportData);
dashboardCarousel.Controls.Add(salesPanel);
dashboardCarousel.Items.Add(salesPanel);
dashboardCarousel.Controls.Add(inventoryPanel);
dashboardCarousel.Items.Add(inventoryPanel);
dashboardCarousel.Controls.Add(reportsPanel);
dashboardCarousel.Items.Add(reportsPanel);
this.Controls.Add(dashboardCarousel);// Create linear carousel for horizontal navigation
Carousel navigationCarousel = new Carousel();
navigationCarousel.CarouselPath = CarouselPath.Linear;
navigationCarousel.TransitionSpeed = 3.0f;
navigationCarousel.Size = new Size(800, 150);
navigationCarousel.Dock = DockStyle.Top;
// Add navigation buttons
string[] sections = { "Home", "Products", "Services", "About", "Contact" };
foreach (string section in sections)
{
ButtonAdv navButton = new ButtonAdv();
navButton.Text = section;
navButton.Size = new Size(120, 100);
navButton.ButtonStyle = ButtonAppearance.Metro;
navigationCarousel.Controls.Add(navButton);
navigationCarousel.Items.Add(navButton);
}
this.Controls.Add(navigationCarousel);// Create touch-friendly image carousel
Carousel photoViewer = new Carousel();
photoViewer.ImageSlides = true;
photoViewer.CarouselPath = CarouselPath.Oval;
photoViewer.Perspective = 5.0f;
photoViewer.TransitionSpeed = 2.5f;
photoViewer.ShowImagePreview = true;
photoViewer.ImageHighlightColor = Color.Gold;
photoViewer.Dock = DockStyle.Fill;
// Load photos from folder
photoViewer.FilePath = Application.StartupPath + "\\Photos";
this.Controls.Add(photoViewer);
// Touch gestures (pan, flick, pinch, stretch) work automatically// Create visually customized carousel
Carousel themedCarousel = new Carousel();
themedCarousel.ImageSlides = true;
themedCarousel.CarouselPath = CarouselPath.Default;
themedCarousel.BackColor = Color.FromArgb(30, 30, 30);
themedCarousel.Perspective = 4.0f;
themedCarousel.TransitionSpeed = 2.0f;
// Apply custom visual effects
themedCarousel.ShowImageShadow = true;
themedCarousel.ShowImagePreview = true;
themedCarousel.ImageHighlightColor = Color.FromArgb(255, 215, 0); // Gold
themedCarousel.ImageShadeColor = Color.FromArgb(100, 100, 100); // Gray
// Add images
foreach (var image in imageCollection)
{
CarouselImage carouselImg = new CarouselImage();
carouselImg.ItemImage = image;
themedCarousel.ImageListCollection.Add(carouselImg);
}
this.Controls.Add(themedCarousel);| Property | Type | Default | Description |
|---|---|---|---|
| CarouselPath | Default | Path layout: Default, Orbital, Oval, Linear |
| bool | false | Enable image-specific mode |
| CarouselItemCollection | - | Collection of items to display |
| CarouselImageCollection | - | Collection of CarouselImage objects |
| string | "" | Folder path to load images from |
| float | 0 | Zoom level of elliptical view |
| float | 0 | Rotation speed multiplier |
| bool | false | Enable continuous auto-rotation |
| bool | false | Display shadows for images |
| bool | false | Show preview of selected image at center |
| Color | - | Color for highlighting selected image |
| Color | - | Color for shading background images |
| Path | Description | Use Case |
|---|---|---|
| Default | Normal elliptical arrangement | General carousels, balanced layouts |
| Orbital | Orbital curve arrangement | Space-themed displays, scientific UIs |
| Oval | Oval structure arrangement | Wide displays, horizontal emphasis |
| Linear | Horizontal linear arrangement | Navigation strips, horizontal galleries |
ControlsItemsImageSlides = trueControlsItemsImageSlides = trueImageListCollection