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() { await _gameService.BuildFullImageUrls(); // Just make sure the Images are up to date if (_gameService.CurrentGames.Count > 0) // There are some { await BuildGamesToShow(); } SetCarousel(); RefreshMe(); }
The BuildGamesToShow method creates the list of game objects (DTO's) that are to be displayed in the carousel. (Its 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.