Is there any way to move to specific slide without triggerring change event? - swiper.js

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.

Related

Refresh button in React-admin

I'm trying to access the refresh button in react-admin project. I tried using getElementsbyClassName it returns HTMLComponents Object but it isn't accessible i.e I can see the component on printing it to console but isn't accessible by code. Is there a way for me to disable this refresh button wherever I want?
I'm not sure the exact use case here, but you can create your own custom AppBar that renders essentially whatever you want: https://marmelab.com/react-admin/Theming.html#replacing-the-appbar.
also see this GitHub issue that mentions removing it entirely: https://github.com/marmelab/react-admin/issues/3383
Within your custom AppBar you could have some logic checks within your custom AppBar if you know ahead of time when you'll want it disabled (like on a certain page/component).
If you need it to be more dyanimcally disabled, you could probably have a very high-level context/state to control that as well..
**NOTE: I have built a custom AppBar before, but I haven't done any selective rendering or disabling within it. So, I can't guarantee that this is exactly correct, but it fits with other custom components I've built.

Vue Slider Component - Enable drag-end and on-click updates concurently

I'm using vue-slider-component in my project. By default, it is clickable i.e. it applies update (calls desired method) on click event. But it also continuously applies updates while dragging, from start to end point. What I wanted is to apply update only once when slider stops at end point. So I added #drag-end attribute. Now the problem is that I can click on slider, and it animates (slides) but no updates are applied, due to #drag-end attribute. How can I remain #drag-end feature but concurently enable update apply on click?
I think setting the lazy attribute to true might fix this.
v-on:change="updateApcs()" :lazy="true"

Get the current slide element on change event in OwlCarousel2

I am trying to create an effect similar to this (the demo uses Bootstrap Carousel):
https://codepen.io/SitePoint/pen/BpVrXP/
Bootstrap's 'slide.bs.carousel' returns a relatedTarget that is the slide element going to be displayed as soon as the carousel is moved i.e changed to another slide.
I haven't been able to find an equivalent data being returned in OwlCarousel2's changed.owl.carousel event. What event, if any, returns the element that's going to be in view?
Is there any alternative way or am I missing something?
Try the event translated.owl.carousel, translated is fired after the animation

Is there a component toggle between gyroscope and finger slide mode?

Is there a component can toggle the gyroscope? I want to make a button to enable or disable the usage of the gyroscope. I've read the official documentation but find nothing about this.
I do not want to close it in WebVR mode. I want to set a button toggle gyroscope. When I close mobile sensor, I can use finger slide screen to change the perspective.
There was a pull request to A-Frame core to enable this feature, and I believe they determined to not add it. Instead it is best practice to enable this feature using a custom component.
Here is the pull request including commentary:
https://github.com/aframevr/aframe/pull/2585
Here is the code that accomplishes what you are looking for, you can use it to make a custom component in your project:
https://github.com/aframevr/aframe/pull/2585/files

DurandalJS - Why are transitions not starting right away when a user navigates

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.