How to display multiple items in one scroll in Blazor Carousel?
The Blazor Carousel component typically displays one item at a time, scrolls to that item, and then shows the next item from the list. However, if you want to display multiple items simultaneously (e.g., 2, 3, 5), and then scroll the same number of items to display the next set, you can achieve this with the right configuration.
The template you define in the carousel will determine how many items are shown at any given time. The Carousel creates a page for each top-level item in its data source, allowing you to control the carousel size and the styles of the nested items.
To display more than one item at a time, group the data source in the carousel so the top-level items define the number of pages the carousel will scroll through. Use a loop in the carousel's template to render the desired information for each actual item in the data source.
@using Syncfusion.Blazor.Navigations <div class="control-container"> <SfCarousel AnimationEffect="CarouselAnimationEffect.Fade" Height="300px" Width="900px"> @foreach (CarouselData data in CarouselDatas) { <CarouselItem> <div style="display:flex;height:100%"> @foreach (CarouselItemModel item in data.Items) { <figure class="img-container"> <img src=https://ej2.syncfusion.com/products/images/carousel/@item.ImageName style="height:100%;width:100%;" alt="Image description" /> <figcaption class="img-caption">@item.Text</figcaption> </figure> } </div> </CarouselItem> } </SfCarousel> </div>
@code { public class CarouselData { public List<CarouselItemModel> Items { get; set; } }
public class CarouselItemModel { public string Text { get; set; } public string ImageName { get; set; } } 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="bee-eater.png" }, new CarouselItemModel(){Text = "Image 6" , ImageName="cardinal.png" }, new CarouselItemModel(){Text = "Image 7" , ImageName="costa-rica.png" }, new CarouselItemModel(){Text = "Image 8" , ImageName="hunei.png" }, } } }; }
<style> .control-container { background-color: #e5e5e5; height: 200px; margin: 0 auto; width: 500px; }
.e-carousel .e-carousel-items .e-carousel-item .img-container { height: 100%; width: 33.33%; }
.e-carousel .e-carousel-items .e-carousel-item .img-caption { bottom: 4em; color: #fff; font-size: 12pt; height: 2em; position: relative; padding: 0.3em 1em; text-align: center; width: 100%; } </style> |
Screenshot:
Carousel Component initally loading with multiple images at once.
Sample link: https://blazorplayground.syncfusion.com/BNVTXGVJAdUFbBMO
Conclusion:
I hope you enjoyed learning about how to display multiple items in one scroll in Blazor Carousel.
You can refer to our Blazor Carousel feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
