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

Blazor Slick Carousel Adding and Removeing 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()    {        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.


Viewing all articles
Browse latest Browse all 4010

Trending Articles



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