Carousel

Basic Carousel

<MudCarousel Class="mud-width-full" Style="height:350px;" TData="object">
    <MudCarouselItem Transition="transition">
        <div class="d-flex" style="height:100%">
            <MudImage Src="../assets/images/media/media-26.jpg" Alt=".." Class="rounded-lg w-100"/>
        </div>
    </MudCarouselItem>
    <MudCarouselItem Transition="transition">
        <div class="d-flex" style="height:100%">
            <MudImage Src="../assets/images/media/media-27.jpg" Alt=".." Class="rounded-lg w-100"/>
        </div>
    </MudCarouselItem>
    <MudCarouselItem Transition="transition">
        <div class="d-flex" style="height:100%">
            <MudImage Src="../assets/images/media/media-28.jpg" Alt=".." Class="rounded-lg w-100"/>
        </div>
    </MudCarouselItem>
</MudCarousel>

Transitions per page

<MudCarousel Class="mud-width-full" Style="height:350px;" TData="object" AutoCycle="false">
        <MudCarouselItem Transition="Transition.Slide">
            <div class="d-flex" style="height:100%">
                <MudImage Src="../assets/images/media/media-27.jpg" Alt=".." Class="rounded-lg w-100"/>
            </div>
        </MudCarouselItem>
        <MudCarouselItem Transition="Transition.Fade">
            <div class="d-flex" style="height:100%">
                <MudImage Src="../assets/images/media/media-26.jpg" Alt=".." Class="rounded-lg w-100"/>
            </div>
        </MudCarouselItem>
        <MudCarouselItem Transition="Transition.Custom" CustomTransitionEnter="bounceIn" CustomTransitionExit="bounceOut">
            <div class="d-flex" style="height:100%">
                <MudImage Src="../assets/images/media/media-28.jpg" Alt=".." Class="rounded-lg w-100"/>
            </div>
        </MudCarouselItem>
        <MudCarouselItem Transition="Transition.Custom" CustomTransitionEnter="backInDown" CustomTransitionExit="backOutDown">
            <div class="d-flex" style="background-color:lightgray; height:100%">
                <MudImage Src="../assets/images/media/media-29.jpg" Alt=".." Class="rounded-lg w-100"/>
            </div>
        </MudCarouselItem>
        <MudCarouselItem Transition="Transition.Custom" CustomTransitionEnter="rotateIn" CustomTransitionExit="rotateOut">
            <div class="d-flex" style="background-color:lightgray; height:100%">
                <MudImage Src="../assets/images/media/media-30.jpg" Alt=".." Class="rounded-lg w-100"/>
            </div>
        </MudCarouselItem>
    </MudCarousel>

Custom arrows

<MudCarousel Class="mud-width-full" Style="height:350px;" AutoCycle="false" TData="object">
        <BulletTemplate Context="selected">
            <div Class="mud-button-root mud-icon-button mud-icon-button-color-inherit mud-ripple mud-ripple-icon">
                <span class="mud-icon-button-label">
                    <MudIcon Icon="@(selected ? Icons.Material.Filled.CheckCircle : Icons.Material.Filled.Circle)" Color="Inherit" />
                </span>
            </div>
        </BulletTemplate>
        <PreviousButtonTemplate>
            <div Class="mud-button-root mud-icon-button mud-icon-button-color-inherit mud-ripple mud-ripple-icon">
                <span class="mud-icon-button-label">
                    <MudIcon Class="mud-ripple mud-ripple-icon mud-icon-button-size-medium" Icon="<path d="M0 0h24v24H0z" fill="none"/><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>" Color="Inherit" />
                </span>
            </div>
        </PreviousButtonTemplate>
        <NextButtonTemplate>
            <div Class="mud-button-root mud-icon-button mud-icon-button-color-inherit mud-ripple mud-ripple-icon">
                <span class="mud-icon-button-label">
                    <MudIcon Class="mud-ripple mud-ripple-icon mud-icon-button-size-medium" Icon="<path d="M0 0h24v24H0z" fill="none"/><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>" Color="Inherit" />
                </span>
            </div>
        </NextButtonTemplate>
        <ChildContent>
            <MudCarouselItem>
                <div class="d-flex" style="height:100%">
                    <MudImage Src="../assets/images/media/media-59.jpg" Alt=".." Class="rounded-lg w-100"/>
                </div>
            </MudCarouselItem>
            <MudCarouselItem>
                <div class="d-flex" style="height:100%">
                    <MudImage Src="../assets/images/media/media-60.jpg" Alt=".." Class="rounded-lg w-100"/>
                </div>
            </MudCarouselItem>
            <MudCarouselItem>
                <div class="d-flex" style="height:100%">
                    <MudImage Src="../assets/images/media/media-61.jpg" Alt=".." Class="rounded-lg w-100"/>
                </div>
            </MudCarouselItem>
        </ChildContent>
    </MudCarousel>

Custom Transition

<MudCarousel Class="mud-width-full" Style="height:350px;" TData="object" AutoCycle="false">
        <MudCarouselItem Transition="Transition.Custom" CustomTransitionEnter="bounceIn" CustomTransitionExit="bounceOut">
            <div class="d-flex" style="height:100%">
                <MudImage Src="../assets/images/media/media-26.jpg" Alt=".." Class="rounded-lg w-100"/>
            </div>
        </MudCarouselItem>
        <MudCarouselItem Transition="Transition.Custom" CustomTransitionEnter="bounceIn" CustomTransitionExit="bounceOut">
            <div class="d-flex" style="height:100%">
                <MudImage Src="../assets/images/media/media-27.jpg" Alt=".." Class="rounded-lg w-100"/>
            </div>
        </MudCarouselItem>
        <MudCarouselItem Transition="Transition.Custom" CustomTransitionEnter="bounceIn" CustomTransitionExit="bounceOut">
            <div class="d-flex" style="height:100%">
                <MudImage Src="../assets/images/media/media-28.jpg" Alt=".." Class="rounded-lg w-100"/>
            </div>
        </MudCarouselItem>
    </MudCarousel>

    <MudTextField @bind-Value="AnimationEntrance" Label="Entrance Class (copy and paste from style tag)" Class="ma-2" />
    <MudTextField @bind-Value="AnimationExit" Label="Exit Class (copy and paste from style tag)" Class="ma-2"/>

    @code {
        private string AnimationEntrance = "bounceIn";
        private string AnimationExit = "bounceOut"; 
    }

Basic Carousel

<MudCarousel Class="mud-width-full" Style="height:350px;" ShowArrows="@arrows" ShowBullets="@bullets" EnableSwipeGesture="@enableSwipeGesture" AutoCycle="@autocycle" TData="object">
        <MudCarouselItem Transition="transition">
            <div class="d-flex" style="height:100%">
                <MudImage Src="../assets/images/media/media-13.jpg" Alt=".." Class="rounded-lg w-100"/>
            </div>
        </MudCarouselItem>
        <MudCarouselItem Transition="transition">
            <div class="d-flex" style="height:100%">
                <MudImage Src="../assets/images/media/media-14.jpg" Alt=".." Class="rounded-lg w-100"/>
            </div>
        </MudCarouselItem>
        <MudCarouselItem Transition="transition">
            <div class="d-flex" style="height:100%">
                <MudImage Src="../assets/images/media/media-18.jpg" Alt=".." Class="rounded-lg w-100"/>
            </div>
        </MudCarouselItem>
    </MudCarousel>
    <MudSelect @bind-Value="transition" Label="Transition" Class="ma-2">
        <MudSelectItem Value="@Transition.Fade">Fade</MudSelectItem>
        <MudSelectItem Value="@Transition.Slide">Slide</MudSelectItem>
        <MudSelectItem Value="@Transition.None">None</MudSelectItem>
    </MudSelect>
    <MudSwitch @bind-Value="arrows" Color="Color.Primary">Show Arrows</MudSwitch>
    <MudSwitch @bind-Value="bullets" Color="Color.Primary">Show Bullets</MudSwitch>
    <MudSwitch @bind-Value="enableSwipeGesture" Color="Color.Primary">Enable Swipe Gesture</MudSwitch>
    <MudSwitch @bind-Value="autocycle" Color="Color.Primary">Auto Cycle (Default: 5 secs)</MudSwitch>

@code {
    private bool arrows = true;
    private bool bullets = true;
    private bool enableSwipeGesture = true;
    private bool autocycle = true;
    private Transition transition = Transition.Slide;
}

DataBinding Carousel

Item 3

Item 3


<MudCarousel Class="mud-width-full" @ref="_carousel" ItemsSource="@_source" @bind-SelectedIndex="selectedIndex" Style="height:350px;" ShowArrows="@_arrows" ShowBullets="@_bullets" EnableSwipeGesture="@_enableSwipeGesture" AutoCycle="@_autocycle">
            <ItemTemplate>
                <div class="d-flex flex-column flex-column justify-center" style="height:350px">
                    <img src="@($"../assets/images/media/media-{_source.IndexOf(@context) + 25}.jpg")" alt="@context"  style="width: 100%; height: 100%; object-fit: cover;" />
                    <MudText Align="@Align.Center" Class="mx-auto">@context</MudText>
                </div>
            </ItemTemplate>
        </MudCarousel>
        <MudSwitch @bind-Value="_arrows" Color="Color.Primary">Show Arrows</MudSwitch>
        <MudSwitch @bind-Value="_bullets" Color="Color.Primary">Show Bullets</MudSwitch>
        <MudSwitch @bind-Value="_enableSwipeGesture" Color="Color.Primary">Enable Swap Gesture</MudSwitch>
        <MudSwitch @bind-Value="_autocycle" Color="Color.Primary">Auto Cycle (Default: 5 secs)</MudSwitch>
        <br />
        <MudButton Class="ma-2" Variant="Variant.Filled" Color="Color.Primary" OnClick="AddAsync">Add</MudButton>
        <MudButton Class="ma-2" Variant="Variant.Filled" Color="Color.Error" OnClick="@(async () => await DeleteAsync(_carousel.SelectedIndex))">Delete</MudButton>
        <MudSelect @bind-Value="selectedIndex" Label="@($"Selected Item (index: {selectedIndex})")">
            @{
                int index = 0;
                foreach (var item in _source)
                {
                    <MudSelectItem Value="@index">@item</MudSelectItem>

                    index++;
                }
            }
        </MudSelect>

                                       
@code {
    private MudCarousel<string> _carousel = default!;
    private bool _arrows = true;
    private bool _bullets = true;
    private bool _enableSwipeGesture = true;
    private bool _autocycle = true;
    private IList<string> _source = new List<string>() { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5" };
    private int selectedIndex = 2;

    private async Task AddAsync()
    {
        _source.Add($"Item {_source.Count + 1}");
        await Task.Delay(1);
        _carousel.MoveTo(_source.Count - 1);
    }

    private async Task DeleteAsync(int index)
    {
        if (_source.Any())
        {
            _source.RemoveAt(index);
            await Task.Delay(1);
            _carousel.MoveTo(System.Math.Max(System.Math.Min(index, _source.Count - 1), 0));
        }
    }
}