I am using the Blazor Slick Carousel to show game cards. It is working fine so far, however, I find that I need to be able to add or remove certain cards to the carousel (filters) and am having difficulty in doing this.
My Razor code for the carousel is as follows:
<BlazorSlickCarousel @ref=gamecarousel Configurations="configurations"><BlazorSlickCarouselContent> @foreach (var game in GamesToShow) {<div class="gamecard"><GameCard Game="game" GameSelected="GameClicked" GameInfoSelected="ShowGameInfo" /></div> }</BlazorSlickCarouselContent><BlazorSlickCarouselLoading><p>Loading...</p></BlazorSlickCarouselLoading></BlazorSlickCarousel>
This is a pretty 'vanilla' setup. I have a CheckSlides
method that gets a callback when the games are loaded:
protected async Task CheckSlides() { // Just make sure the Images are up to date await _gameService.BuildFullImageUrls(); // There are some if (_gameService.CurrentGames.Count > 0) { await BuildGamesToShow(); } SetCarousel(); RefreshMe(); }
The BuildGamesToShow
method creates the list of game objects (DTO's) that are to be displayed in the carousel (it's async because I have been trying stuff currently removed).
protected async Task BuildGamesToShow(){ GamesToShow.Clear(); // Clear the list if (ShowOnlyIwins) { foreach (GameDTO game in _gameService.CurrentGames) { if (game.InstantWins.Count > 0) { GamesToShow.Add(game); } } } if (ShowOnlyComingSoon) { foreach (GameDTO game in _gameService.CurrentGames) { if (game.IsComingSoon) { GamesToShow.Add(game); } } } else { foreach (GameDTO game in _gameService.CurrentGames) { if (!game.IsComingSoon) { GamesToShow.Add(game); } } }}
This is the SetCarousel
method that sets up the WSMBCSettings
and responsiveness:
protected void SetCarousel(){ // to <= 780px screen WMBSCSettings breakpoint1280Settings = new WMBSCSettings { arrows = false, autoplay = true, autoplaySpeed = 1500, dots = true, slidesToShow = 3, slidesToScroll = 3, infinite = true, centerMode = true, }; WMBSCResponsiveSettings breakpoint1280Responsive = new WMBSCResponsiveSettings { breakpoint = 1280, settings = breakpoint1280Settings }; // to <= 780px screen WMBSCSettings breakpoint820Settings = new WMBSCSettings { arrows = false, autoplay = true, autoplaySpeed = 1500, dots = true, slidesToShow = 2, slidesToScroll = 2, infinite = true, centerMode = true, }; WMBSCResponsiveSettings breakpoint820Responsive = new WMBSCResponsiveSettings { breakpoint = 820, settings = breakpoint820Settings }; // to <= 480px screen WMBSCSettings breakpoint480Settings = new WMBSCSettings { slidesToShow = 1, slidesToScroll = 1, infinite = true, arrows = false, dots = true, autoplay = true, centerMode = true, }; WMBSCResponsiveSettings breakpoint480Responsive = new WMBSCResponsiveSettings { breakpoint = 480, settings = breakpoint480Settings }; // add responsivity List<WMBSCResponsiveSettings> responsiveSettingsList = new List<WMBSCResponsiveSettings>(); responsiveSettingsList.Add(breakpoint1280Responsive); responsiveSettingsList.Add(breakpoint820Responsive); responsiveSettingsList.Add(breakpoint480Responsive); // the carousel configurations configurations = new WMBSCInitialSettings { arrows = false, //arrows = true, autoplay = true, autoplaySpeed = 1500, dots = true, slidesToShow = 4, slidesToScroll = 4, infinite = true, centerMode = true, responsive = responsiveSettingsList }; if (GamesToShow.Count < 3) { configurations.slidesToShow = 1; }}
This all works well on the page load. However if I change one of the settings - e.g. ShowOnlyIWins
. This will work, if the slides are already there. But if I add the others back in (show all) it will add the slides back underneath the carousel. If I then (say) adjust the window size, it will correct itself. Its as if the carousel doesn't re render under the usual Blazor refresh (this.StateHasChanged
).
I am wondering I am using the correct approach to this? If not, what is it, if so what am I missing. I note that the carousel has various methods such as destroy, constroy (?) etc. add and remove slides, but I think the add needs to have html (render fragments) to add. This seems messy.
Thank in advance.