# Getting Started with the .NET MAUI Carousel

This guide provides the information you need to start using the Telerik UI for .NET MAUI Carousel by adding the control to your project.

At the end, you will achieve the following result.

![Telerik UI for .NET MAUI Carousel Carousel displays a horizontal sequence of image items, where the highlighted item is at the center and parts of the previous and next items are visible on both sides](https://www.telerik.com/maui-ui/documentation/assets/86b5ec3adb0cb175b4011fec65bb6207/carousel-getting-started.png)

## Prerequisites

Before adding the Carousel, complete the following steps:

1. [Set up your .NET MAUI application](https://www.telerik.com/maui-ui/documentation/get-started/quickstart#prerequisites).

2. [Set Up Telerik Development Environment](https://www.telerik.com/maui-ui/documentation/get-started/quickstart#set-up-telerik-development-environment)

## Define the Carousel

The Carousel displays the items from its `ItemsSource` collection and uses the `ItemTemplate` to define how each item looks. Items in the collection must not be `null`.

To display the Carousel on a page, complete the following steps:

1. Define a business object that describes each item:

   ```C#
   public class CarouselItem
   {
       public string Title { get; set; }

       public string Description { get; set; }

       public string Image { get; set; }

       public bool IsNewDish { get; set; }
   }
   ```

2. Define a view model that exposes the collection of items:

   ```C#
   public class CarouselViewModel
   {
       public ObservableCollection<CarouselItem> Items { get; } = new()
       {
           new CarouselItem
           {
               Title = "Blueberry Pancakes",
               Description = "Dutch baby pancake with fresh blueberries, orange zest, and a drizzle of maple syrup.",
               Image = "carousel_firstlook_1.jpg",
               IsNewDish = true
           },
           new CarouselItem
           {
               Title = "Bolognese",
               Description = "Slow-simmered ragù with hand-pulled spaghetti, topped with micro herbs.",
               Image = "carousel_firstlook_2.jpg",
               IsNewDish = false
           },
           new CarouselItem
           {
               Title = "Spaghetti",
               Description = "Fresh spaghetti with San Marzano tomato sauce and garden basil.",
               Image = "carousel_firstlook_3.jpg",
               IsNewDish = false
           },
           new CarouselItem
           {
               Title = "Lemon Herb Chicken",
               Description = "Herb-crusted chicken with lemon butter sauce and roasted vegetables.",
               Image = "carousel_firstlook_4.jpg",
               IsNewDish = true
           },
           new CarouselItem
           {
               Title = "Fine Dining",
               Description = "Delicate tartare with edible flowers, micro greens, and golden carrot purée.",
               Image = "carousel_firstlook_5.jpg",
               IsNewDish = false
           },
           new CarouselItem
           {
               Title = "Raspberry Cake",
               Description = "Raspberry coulis over a rich cheesecake with fresh berries.",
               Image = "carousel_firstlook_6.jpg",
               IsNewDish = true
           },
           new CarouselItem
           {
               Title = "Salmon Canapues",
               Description = "Smoked salmon on crispy toasts with cream cheese and dill.",
               Image = "carousel_firstlook_7.jpg",
               IsNewDish = false
           },
           new CarouselItem
           {
               Title = "Shrimp Fettuccine",
               Description = "Tiger prawns tossed with fettuccine in a light garlic cream sauce.",
               Image = "carousel_firstlook_8.jpg",
               IsNewDish = true
           }
       };
   }
   ```

3. Add the Carousel to your page:

   ```XAML
   <ContentView.BindingContext>
       <local:CarouselViewModel />
   </ContentView.BindingContext>
   <telerik:RadCarousel ItemsSource="{Binding Items}"
                        VerticalOptions="Center">
       <telerik:RadCarousel.ItemTemplate>
           <DataTemplate x:DataType="local:CarouselItem">
               <Image Source="{Binding Image}" Aspect="AspectFill" />
           </DataTemplate>
       </telerik:RadCarousel.ItemTemplate>
   </telerik:RadCarousel>
   ```

   ```C#
   var carousel = new RadCarousel
   {
       VerticalOptions = LayoutOptions.Center,
       ItemsSource = new CarouselViewModel().Items,
       ItemTemplate = new DataTemplate(() =>
       {
           var image = new Image { Aspect = Aspect.AspectFill };
           image.SetBinding(Image.SourceProperty, nameof(CarouselItem.Image));
           return image;
       })
   };
   ```

4. Add the `telerik` namespace:

   ```XAML
   xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
   ```

5. Register the Telerik controls through the `Telerik.Maui.Controls.Compatibility.UseTelerik` extension method called inside the `CreateMauiApp` method of the `MauiProgram.cs` file of your project:

   ```C#
   using Telerik.Maui.Controls.Compatibility;

   public static class MauiProgram
   {
       public static MauiApp CreateMauiApp()
       {
           var builder = MauiApp.CreateBuilder();
           builder
               .UseTelerik()
               .UseMauiApp<App>()
               .ConfigureFonts(fonts =>
               {
                   fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
               });
           return builder.Build();
       }
   }
   ```

When you run the app, the first item is highlighted at the center of the Carousel. Swipe or scroll to move to the other items.

> tip For a runnable example with the Carousel Getting Started scenario, see the [SDKBrowser Demo Application](https://www.telerik.com/maui-ui/documentation/demos-and-sample-apps/sdkbrowser-app) and go to the **Carousel > Getting Started** category.

## Additional Resources

* [.NET MAUI Carousel Forum Page](https://www.telerik.com/forums/maui)
* [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
* [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)

## See Also

* [Highlighted Item](https://www.telerik.com/maui-ui/documentation/controls/carousel/highlighted-item)
* [Item Size and Spacing](https://www.telerik.com/maui-ui/documentation/controls/carousel/item-size-and-spacing)
* [Styling](https://www.telerik.com/maui-ui/documentation/controls/carousel/styling)