I need to run a function after Swiper finishes loading when the document is ready? Is there a method available for when Swiper finishes loading (applies the first swiper-slide-active) after initialisation.
I know there is an onSlideEnd, but the very first slide doesn't technically slide when it's first loaded. I want to avoid using document.ready because I want to attach the function to the Swiper instance itself.
The current version includes onInit, which appears to be what you are looking for.
Related
I ran into an issue, my lazy loaded PDP module having issue with deferred loadingof componnets
I used deferLoading: DeferLoadingStrategy.INSTANT but didnt work.
actually,I want to scroll down to a slot by clicking on button in top of the screen, like for review/rating componnets from top to bottom scroll.
Can I load deferred slot/components using any service on button click ?
INSTANT is the default deferred loading configuration. If you are specifically working on the review/rating component, you might want to look into the above-the-fold loading
More information can be found here - https://sap.github.io/spartacus-docs/above-the-fold/
I am currently using swiper wrapper for angular https://www.npmjs.com/package/ngx-swiper-wrapper,
so basically I want to differentiate between manual slide that user performed and my own app pre-selecting active slide.
Whenever i use setIndex method (presumably equivalent to goToSlide at swiper js),it trigger all kind of changeEvent which manual slide change would also trigger(transitionEnd, slideChange, etc).
Is there any way to change active slide without trigerring those event?
managed to do that by using function
setIndex(index, speed?, silent?) // Runs transition to slide with given index.
by setting silent to true (slideChangeTransitionENd) event wont be called.
There should be better documentation about this.
I've created a simple blazor app that has a slider on top. There is a javascript self executing function that adds some inline css to this slider so it makes its' height the same as window.height.
I'm adding this javascript file in _Host.cshtml, before closing the body tag.
My issue is that this inline styling isn't applied. I've debugged the javascript code and it gets the correct height, the element on which I want to add the styling is found, the element.css('height', myHeight) is being called with the correct value, but in the end there is no style attribute on that element. I've also tried, after the component has been rendered, to remove the script tag from the page and add it again, hoping that it will re-run and then change the height, but no success there as well.
I've created a .NET Core WebApp using that same slider and everything works as expected (I have the style attribute on my element). In this second app I add the script before closing the body tag, in _Layout.cshtml.
Seems preety much the same as the blazor app, but for some reason, on that one doesn't work.
Do you guys have any idea why?
EDIT:
I've found something interesting. In the beginning, the page is loaded correctly, but the component is being reloaded after the app connects to the we socket Information: WebSocket connected to wss://localhost:44361/_blazor?id=cepYgPnJYddq2bHSywwwYw.. This is when I lose the inline styles.
So how can I stop it from reloading? I guess this is the question.
The situation. I have an a custom alert component in a shared components file. I have my different screens in their respective files, and they all import the custom alert. On navigation away from one screen to another, and then I navigate back via reactnavigation's back arrow, the alert is not remounted, and so its invocation throws an error. How should I take care of this?
I figured out a hack; so long it works for now and maintains the development momentum. So, prior to any function call that will eventually invoke the custom imported alert, I call setState, and update a dummy value, e.g. this.setState({sth:'sth'}). This seems to in turn, reload the component's relation to its imported stuff, and just like that the error is no more.
Could someone explain why the transitions (at least the default one - entrance) are not starting right away when a user clicks on a link (navigate) with Durandal?
In other words, do we need two mechanisms (loader animation + transition) to indicate that there is an action underway (ex. ajax call inside the activate method).
I'm sure there's a good reason, or maybe I just have to modify the entrance transition?
It seems like Durandal's transitions run once the activate function resolves. I asked a similar question where I enumerated some of the possible solutions that I found which worked for my situation specifically:
Manually animate away every view in its deactivate() and animate it back in via its viewAttached()
Bind the .page-host div's visibility to router.isNavigating (using a custom binding to handle the transition such as the fadeVisible example from the knockout site)
Manually subscribe to router.isNavigating and run custom logic when it changes
Hopefully this helps.
If you did not compress your entire application then the first process will be requirejs downloading the next amd module and then downloading the appropriate view.
The next step is durandal calling activate on your module. Activate if it returns a Deferred then it will wait for the deferred to complete.
Once activate is complete then the transition is called. The transition is responsible for swapping out the old view for the new one.
So, if its taking a while to kick off the transition its probably because its lagging in downloading your module and view.. or your activate method is taking a bit of time to finish.