Anyone get Swiper to work with Blazor yet?

[horrorhound]

When implementing Swiper everything seems to initialize ok (no javascript errors) but the images just roll/scroll off to the right of the screen after initialize.

Just wondering if Swiper is even compatible with Blazor (I'm using Blazor Server haven't tried WASM with Slider yet).

[horrorhound]

Nevermind, looks like I just had some CSS interfering with Swiper.

Looks like Swiper works fine with Blazor.

[horrorhound]

Whenever something doesn't work right on the first load in Blazor it's probably because of where the init code is located.

Required items I had to do if I remember correctly... Sorry can't test at the moment (waiting on a new HD to download my source to new PC).

1. Include your js file which includes your initSwiper code (I put mine in main.js) in Layout.cshtml

   <script src="scripts/main.js"></script>

2. Add @Inject IJSRuntime JsRuntime to your razor page using swiper.

3. Invoke your InitSwiper in OnAfterRenderAsync() for page using swiper.
   protected async override Task OnAfterRenderAsync(bool firstRender)
   {
   await JsRuntime.InvokeVoidAsync("initSwiper", null);
   }

My JS Swiper Code:

function initSwiper() {

console.log('Entered initSwiper!');
console.log('swiper text:' + document.querySelector('.swiper').textContent);
console.log(document.querySelector('.swiper'));

const swiper = new Swiper('.swiper', {

slidesPerView: 5,
spaceBetween: 10,
slidesPerGroup: 2,
loop: false,

// If we need pagination
pagination: {
  el: '.swiper-pagination',
  clickable: true,
},

// Navigation arrows
navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
},

// And if we need scrollbar
scrollbar: {
  el: '.swiper-scrollbar',
},
breakpoints: {
  100: {
    slidesPerView: 2,
    spaceBetween: 10,
  },
  640: {
    slidesPerView: 3,
    spaceBetween: 10,
  },
  768: {
    slidesPerView: 4,
    spaceBetween: 10,
  },
  1024: {
    slidesPerView: 5,
    spaceBetween: 10,
  },
}

});
}

[TyDPower]

You are a champion! Thank you very much, I really appreciate the help. This has been very helpful.

[TheAtomicOption]

While this will appear to be functional, keep in mind that you're likely leaking browser memory. As users navigate around your app you'll be orphaning instances of Swiper, and if you try to do certain things with your components you'll get unexpected results. For any tags you're generating in a loop in Blazor being careful to use @key=[identifier] can help somewhat with the latter of those issues, but it won't fix the swiper instance orphaning on navigation.

[horrorhound]

Is the potential memory leak because initSwiper in main.js executes "new Swiper" called each time that page loads?

[TheAtomicOption]

Sort of yes. Blazor is an application with components. It doesn't have "pages" in the traditional sense. The memory leak is because the browser's perspective and Blazor's perspective are different. From the browser's perspective, Blazor is a single page that loads once (which is why it's called a Single Page Application framework) and user navigation doesn't load new pages, but from Blazor's perspective a component will load and run over and over again every time the user navigates to it, and further the component will partially update every time one of its parameters change.

To avoid memory leaks the component needs to hold a reference to any JS objects that get created during the component's lifecycle, such as when calling new Swiper, and then properly dispose of those JS objects when Blazor disposes of the component. In the case of Swiper this is not trivial to implement correctly. Theoretically you should be able to call swiperObject.destroy() to have swiper eliminate itself, but I've run into problems getting that to fire correctly. If you try to implement it, make sure to actually check with the browser's memory profiler to make sure that the objects are being released instead of building up.

As mentioned in my top level comment, for Blazor to work with Swiper smoothly there will probably need to be a purpose-built Blazor Component and Swiper Module, similar to the modules that Swiper provides for React, Angular, Vue etc.

[TheAtomicOption]

I'm writing a significantly-sized Blazor Server app at my company, and while I was able to get Swiper to "work" in the sense that the gallery initialized fine and all the Swiper features are functioning on first page load, AFAICT Swiper isn't actually compatible with Blazor. Blazor needs control-of/awareness-of all changes to the DOM, so that it can correctly model it on the server C# side and do incremental updates over its SignalR connection as intended. That need doesn't play well with Swiper's insertion of or changes to DOM objects.

I think it might be possible to write a module to make Swiper compatible with Blazor that would be similar to what is being done for React, but until someone writes that module, they aren't compatible.

[imprathamesh]

I have been trying work swiper in blazor wasm but its breaking
If you want without breakpoint then its work fine but in mobile looks bad.

This is totally issue with dom. and swiper is not compatible with blazor. Better is to go with flexbox horizontal scroll that will better till this get compatible perfectly

[akramfahem]

Found This Solution while i was trying to find an Alternative Thanks man really Helped me