We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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?


Carousel.jpg


Thanks


7 Replies 1 reply marked as answer

VR Vijay Ravi Syncfusion Team January 13, 2023 09:34 AM UTC

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


HO horacioj January 13, 2023 02:43 PM UTC

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.



MG Mugilraj Govindarajan Syncfusion Team January 16, 2023 09:04 AM UTC

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


HO horacioj January 16, 2023 03:24 PM UTC

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





RV Ravikumar Venkatesan Syncfusion Team January 19, 2023 10:45 AM UTC

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


Marked as answer

HO horacioj January 19, 2023 04:36 PM UTC

Thanks!



RV Ravikumar Venkatesan Syncfusion Team January 20, 2023 05:54 PM UTC

Horacioj,


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


Loader.
Live Chat Icon For mobile
Up arrow icon