Can I show multiple slides at once using Blazor carousel?
Hi,
Is there a way to show multiple slides at once using the Blazor carousel component?
I have a requirement that is similar to the image below. Thanks.
Hi David,
Greetings from Syncfusion support.
Yes. You can create multiple slides at once in the Carousel component by looping the list of carousel items from the carousel data source as shown in the below code.
[Index.html]
|
<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 CarouselData { Items = new List<CarouselItemModel> { 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 CarouselData { Items = new List<CarouselItemModel> { new CarouselItemModel(){Text = "Image 7" , ImageName="cardinal.png" }, new CarouselItemModel(){Text = "Image 8" , ImageName="costa-rica.png" }, new CarouselItemModel(){Text = "Image 9" , ImageName="hunei.png" } } } }; |
Output:
Kindly try the attached sample and let us know if this meets your requirement.
Regards,
Ruksar Moosa Sait
Attachment: CarouselMultipleSlides_7e05fdd3.zip
