Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4006

Blazor Slick carousel adding and removing slides

$
0
0

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.


Viewing all articles
Browse latest Browse all 4006

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>