Can this kind or carousel be done with the Carousel component? Or with other component?

[horacioj]

Hi,

Can this kind or carousel be done with the Carousel component?  I don't think so because all the demos show a single item (image) at a time, except for the "partial visible functionality", but it isn't the sa

Or with other components?

Thanks

[Vijay Ravi]

Hi Horacioj

You can render multiple images in a single slide by rendering the Carousel as shown in the below code snippet.

[Index.razor]

<SfCarousel AnimationEffect="CarouselAnimationEffect.Fade">

@foreach (CarouselData data in CarouselDatas)

        {

<CarouselItem>

<div style="display:flex;height:100%">

@foreach (CarouselItemModel item in data.Items)

                    {

<figure class="img-container">

<img src=Images/@item.ImageName style="height:100%;width:100%;" />

<figcaption class="img-caption">@item.Text</figcaption>

</figure>

                    }

</div>

</CarouselItem>

        }

</SfCarousel>

 

List<CarouselData> CarouselDatas = new List<CarouselData>

    {

       new CarouselData

       { Items = new List<CarouselItemModel>

          {

new CarouselItemModel(){Text = "Image 1" , ImageName="bee-eater.png" },

new CarouselItemModel(){Text = "Image 2" , ImageName="cardinal.png" },

new CarouselItemModel(){Text = "Image 3" , ImageName="costa-rica.png" },

new CarouselItemModel(){Text = "Image 4" , ImageName="hunei.png" },

           }

    },

    new CarouselData

       { Items = new List<CarouselItemModel>

          {

new CarouselItemModel(){Text = "Image 5" , ImageName="kaohsiung.png" },

new CarouselItemModel(){Text = "Image 6" , ImageName="bee-eater.png" },

new CarouselItemModel(){Text = "Image 7" , ImageName="cardinal.png" },

new CarouselItemModel(){Text = "Image 8" , ImageName="costa-rica.png" }

           }

       }

    };

Output screenshot:

Best Regards,

Vijay Ravi

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: carousel_61e5059d.zip

[horacioj]

Thank you, it looks promising, but it isn't responsive. If you reduce the browser's width (or on mobile), some images goes off screen.

[Mugilraj Govindarajan]

Hi Horacioj,

In our shared sample, the carousel parent element ('.e-control-container') has a fixed width, so the carousel items are not responsive when the browser is resized. To make the carousel responsive when the browser is resized, remove the width of the carousel parent element.

Index.razor

.control-container {

        background-color: #e5e5e5;

        height: 200px;

        margin: 0 auto;

        width: 700px;

    }

Regards,
Mugilraj G

Attachment: carousel_a56b7f48.zip

[horacioj]

Thank you, Mugilraj. I already tried that. The problem is the images get distorted, even with the  style="height:100%;width:100%;"

The true problem is in having the items in fixed groups of 4. The amount of items on screen should change along with the screen size.

I guess I'll have to build my own "Carousel" for this.  SfCarousel isn't meant for this use case. It could be nice if in the future this case (very common, I think) coul

[Ravikumar Venkatesan]

Hi Horacioj,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/syncfusion_carousel_responsive_using_mediaquery144825559

You can change the number of images rendered on the carousel item based on the available width with help of the SfMediaQuery component as shown in the below code snippet.

UG: https://blazor.syncfusion.com/documentation/media-query/getting-started

API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfMediaQuery.html

[Index.razor]

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Navigations

 

<div class="control-container">

    <SfMediaQuery @bind-ActiveBreakPoint="activeBreakpoint" MediaBreakpoints="mediaBreakpoints"></SfMediaQuery>

    <SfCarousel AnimationEffect="CarouselAnimationEffect.Fade">

        @{

            int itemsPerSlide = (activeBreakpoint == "Large" ? 4 : activeBreakpoint == "Medium" ? 3 : activeBreakpoint == "Small" ? 2 : 1);

            int slideCount = (int)Math.Round((double)CarouselDatas.Count / itemsPerSlide, MidpointRounding.AwayFromZero);           

            @for (int i = 0; i < slideCount; i++)

            {

                int index = i;

                <CarouselItem>

                    <div style="display:flex;height:100%">

                        @for (int j = (index * itemsPerSlide); j < ((index + 1) * itemsPerSlide); j++)

                        {

                            if (CarouselDatas.Count > j)

                            {

                                <figure class="img-container">

                                    <img src=Images/@CarouselDatas[j].ImageName style="height:100%;width:100%;" />

                                    <figcaption class="img-caption">@CarouselDatas[j].Text</figcaption>

                                </figure>

                            }

                        }

                    </div>

                </CarouselItem>

            }

        }

    </SfCarousel>

</div>

@code {

    private string activeBreakpoint { get; set; } = "Large";

    private List<MediaBreakpoint> mediaBreakpoints = new List<MediaBreakpoint>()

    {

        new MediaBreakpoint { Breakpoint = "Large", MediaQuery = "(min-width: 1328px)" },

        new MediaBreakpoint { Breakpoint = "Medium", MediaQuery = "(min-width: 996px)" },

        new MediaBreakpoint { Breakpoint = "Small", MediaQuery = "(min-width: 664px)" },

        new MediaBreakpoint { Breakpoint = "Mobile", MediaQuery = "(max-width: 332px)" },

    };

    List<CarouselItemModel> CarouselDatas = new List<CarouselItemModel>()

    {

        new CarouselItemModel(){Text = "Image 1" , ImageName="bee-eater.png" },

        new CarouselItemModel(){Text = "Image 2" , ImageName="cardinal.png" },

        new CarouselItemModel(){Text = "Image 3" , ImageName="costa-rica.png" },

        new CarouselItemModel(){Text = "Image 4" , ImageName="hunei.png" },

        new CarouselItemModel(){Text = "Image 5" , ImageName="kaohsiung.png" },

        new CarouselItemModel(){Text = "Image 6" , ImageName="bee-eater.png" },

        new CarouselItemModel(){Text = "Image 7" , ImageName="cardinal.png" },

        new CarouselItemModel(){Text = "Image 8" , ImageName="costa-rica.png" }

    };

    public class CarouselItemModel

    {

        public string? Text { get; set; }

        public string? ImageName { get; set; }

    }

}

Regards,

Ravikumar Venkatesan

[horacioj]

Thanks!

[Ravikumar Venkatesan]

Horacioj,

Please get back to us if you need any other assistance.