Javascript not working when page changes in Blazor

Question

I'm developing a project in Blazor but I'm having trouble with javascript.

When I first compile the project it works fine!

but When I go to any page and come back, the slider(swiperjs) does not work at all. I also tried with other carousel for example: owlCarousel , the result is still unsuccessful. it only works when the project is first built, not working after page navigation.

I'm waiting for your help:)

Layout Page:

@inherits LayoutComponentBase
@inject IJSRuntime Js
@code {
// OnAfterRenderAsync (I also tried this method)
    protected override async Task OnInitializedAsync()
    {
            await Js.InvokeVoidAsync("import", "https://unpkg.com/swiper/swiper-bundle.min.js");
            await Js.InvokeVoidAsync("import", "/custom/js/swiper.js");
             
    }
}

<div class="container">
   
    <div class="p-40">
        <h3>slider</h3>
        <a href="/">home</a> <a href="/home">page</a>
    </div>

    @Body
</div>

**I use a slider on my homepage:**

<div class="container">
<div class="row">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="custom/img/slider/slide19.jpg" class="img-responsive" /></div>
            <div class="swiper-slide"><img src="custom/img/slider/slide19.jpg" class="img-responsive" /></div>
            <div class="swiper-slide"><img src="custom/img/slider/slide19.jpg" class="img-responsive" /></div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</div>
</div>

wwroot:index.hmtl

Matex

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,500,400italic,300italic,300,100italic,100|Poppins:300,400,700"> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <style>.swiper { width: 100%; height: 100%; }.swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } </style>

Loading...

 <div id="blazor-error-ui"> An unhandled error has occurred. <a href="" class="reload">Reload</a> <a class="dismiss"></a> </div> <script src="_framework/blazor.webassembly.js"></script> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script src="/custom/js/swiper.js"></script>

Answer 1

Try this:

    protected override async Task OnAfterRenderAsync (bool firstRender)
    {
        if(firstRender)
{
            await Js.InvokeVoidAsync("import", "https://unpkg.com/swiper/swiper-bundle.min.js");
            await Js.InvokeVoidAsync("import", "/custom/js/swiper.js");
   }          
    }

Answer 2

If I am not mistaken, Blazor WASM is sort of downloaded and cached in the browser. Meaning the next time you go back to your page, it's not being initialized again. It already has been.

Now, if you are trying to use JavaScript, that will be a problem to control the carousel. I suggest you attempt to wash away all JS from your blazor project and use C# instead.

For the carousel, there is a nice one at https://blazorise.com/docs . It runs perfectly.

Answer 3

Yes, this is a solution, but why externally added javascripts do not work.

It should be able to work without ready component, we need to add the library we want.