Schroeder Consulting LLC

MudBlazor is a set of UI components for the Microsoft Blazor framework. In this example, I added MudBlazor to a Blazor Web App. My previous blogs describe the process.

The MudBlazor carousel can be used with images. For a client project, I choose to use a MudBlazor carousel with images and encountered some problems.

Here is the desired result:

Here is the basic structure I started with:

<MudCarousel Class="mud-width-full" Style="height:500px;" ShowArrows=true ShowBullets=true EnableSwipeGesture=true AutoCycle=true TData="object">
    <MudCarouselItem Transition=Transition.Slide Color="@Color.Transparent">
        <MudImage Fluid="true" Src="/images/840.jpeg" Alt="Image" />
    </MudCarouselItem>
    <MudCarouselItem Transition=Transition.Slide Color="@Color.Transparent">
        <MudImage Fluid="true" Src="/images/1767.jpeg" Alt="Image" />
    </MudCarouselItem>
    <MudCarouselItem Transition=Transition.Slide>
        <MudImage Fluid="true" Src="/images/669.jpeg" Alt="Image" />
    </MudCarouselItem>
    <MudCarouselItem Transition=Transition.Slide>
        <MudImage Fluid="true" Src="/images/1764.jpeg" Alt="Image" />
    </MudCarouselItem>
</MudCarousel>

There is a problem with this that on a smaller device, the text appears much lower than the carousel. To fix this, I added a media query for devices with width less than or equal to 600px. This was add to app.css.

@media only screen and (max-width: 600px) {
    .mud-carousel > .d-flex > .align-self-center {
        height: 200px;
        display: flex;
        justify-content: center;
    }
}

Then the text sits properly with the text on most smaller devices.

The next problem I encountered was that the image did not always fit across the width of the carousel. The solution I found was to add a tag Style=”display:flex;” to MudImage.

The MudBlazor carousel allows binding to any IEnumerable list. This is accomplished by adding the list to the ItemsSource attribute and using an ItemTempate.

In this case, my used and IList<string> with a list of image names:

private IList<string> _source = new List<string>() { "images/840.jpeg", "/images/1767.jpeg", "/images/669.jpeg", "images/1764.jpeg"};

The TData attribute I used before for MudCarousel was an “object”. I had to change this to “string”. This is the markup for the carousel:

<MudCarousel Class="mud-width-full md-carousel" @ref="_carousel" ItemsSource="@_source" ShowArrows=true ShowBullets=true EnableSwipeGesture=true AutoCycle=true TData="string">
    <ItemTemplate>
        <div class="d-flex">
            <MudImage Fluid="true" Src="@context" Alt="Image" Class="mx-auto my-auto" ></MudImage>
        </div>
      </ItemTemplate>
</MudCarousel>

In this case, I had to add a <div> with class=”d-flex” to force the image to fill the entire width of the carousel.

I added an @ref for the carousel because I wanted to implement the Add and Delete buttons picture. The methods necessary for these buttons are specified in the OnClick attribute of the buttons.

<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>

The Add button will add an image to the carousel. In this case I just added another image. It can be added as many times as desired. In a more complicated scenario, one would add an image using an input specifying the image name. Here is the code I used for the Add button:

 private async Task AddAsync()
 {
     _source.Add("/images/1758.jpeg");
     _carousel.MoveTo(_source.Count - 1);
 }

The Delete button will delete the image that is currently shown by the carousel:

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));
    }

}

The final result is a MudBlazor carousel with data binding.