Comments (9)
code example, like codepen or jsbin? (to see what you are doing “with javascript”)
from swipe.
code example, like codepen or jsbin? (to see what you are doing “with javascript”)
It is hard to replicate the issue in codepen or jsfiddle for such a simple problem.
This is what we get in dev tools after the page is loaded.
<section class="swipe" style="visibility: visible;">
<div class="swipe-wrap" style="width: 9457.8px;">
<div style="width: 1576.3px; left: 0px; transition-duration: 0ms; transform: translateX(-1576.3px);" data-index="0">prev</div>
<div style="width: 1576.3px; left: -1576.3px; transition-duration: 250ms; transform: translateX(0px);" data-index="1">active</div>
<div style="width: 1576.3px; left: -3152.6px; transition-duration: 250ms; transform: translateX(1576.3px);" data-index="2" class="">next</div>
</div>
</section>
As code shows, we have inline width
set to whatever SwipeJs was calculating on initial setup. We also have those transition-duration
which are changing as you swipe.
The issue comes into play when the width of the parent container is changed using javascript by adding some css class that changes lateral padding or lateral margins or width.
This problem could be easily solved by a slider.setup()
which recalculates the widths, but this method
aslo resets those transition-duration
's to zero, which in my case creates a glitch on screen, so I cant use it as it is. I need a method
that does exactly the same as setup()
method, but without touching existing transition-duration
's.
PS - It would be even nicer if SwipeJs would observe
that the width in which it seats was chenged and to recalculate the widths automatically. SwipeJs already does recalculate widths on resize
event, but the parent element's width can be changed in various forms: by animate padding or margins, or by adding extra elements inside it.
from swipe.
I understand better now.
When I run slidre.setup()
, I also observe the transition-duration
set to zero; however, Swipe dynamically adds the duration on slide change, so the end result works the same (at least for what I've tested).
from swipe.
I understand better now.
When I run
slidre.setup()
, I also observe thetransition-duration
set to zero; however, Swipe dynamically adds the duration on slide change, so the end result works the same (at least for what I've tested).
Reseting the transition-duration
to zero means instant change on screen, but on the page you may have elements with some kind of transition, animation, and the result will be the following: all emelemts changes smoothly, except the sliders!
from swipe.
I understand better now.
When I run
slidre.setup()
, I also observe thetransition-duration
set to zero; however, Swipe dynamically adds the duration on slide change, so the end result works the same (at least for what I've tested).
In my case I have sidebars under-covered by padding, and the padding is opening with exactly the same transition duration as in sliders, So the result shoud be: as sidebar grows, sliders shrink with same speed. I used to add padding directly inside swipe-wrap > div
's but there is another issue: as number of slides increases ... performance speed goes down!
So, after all I came with that solution above, which is the only solution possible since SwipeJs puts the transition-duration
inline. I don't know any other method capable to run before SwipeJs puts that transition-duration
inline. Ofc, there is the possibility to write a method myself directly in the SwipeJs library and to import that modified library, but as a principle I stick to original libraries to preserve the ability to update.
from swipe.
I understand better now.
When I run
slidre.setup()
, I also observe thetransition-duration
set to zero; however, Swipe dynamically adds the duration on slide change, so the end result works the same (at least for what I've tested).
After some more tests I understand even better why SwipeJs can't solve this issue without a major change since the width recalculation moment is the moment when setup()
is called! This means the following: the container should be already in the final position because another recalculation won't be done! This is why as it is SwipeJs won't change that transition-duration: 0s
. It needs a modern aproach instead of that recalculation on resize
event to put an Resize Observer
, but for now it's browser support is stil low...
https://caniuse.com/#search=Resize%20Observer
from swipe.
Okay, well, closing since you understand your issue.
Best to use simple rather than complicated solutions!
from swipe.
Okay, well, closing since you understand your issue.
Best to use simple rather than complicated solutions!
True.
from swipe.
For the peaple facing the same issue the solution is to call slider.setup()
in a setTimeout loop, like this:
let periods = Math.round(whateverTransitionDurationIs / 17, 0);
for (let i = 0; i < periods; i++) {
setTimeout(() => {
slider.setup();
}, (i + 1) * 17); // one per frame
}
from swipe.
Related Issues (20)
- Zoom does not work HOT 1
- Add configurable selector for children to use as a slides HOT 1
- slide(index, duration) does not work HOT 2
- enhancement: add 3 missing props to React documentation HOT 2
- Each slide appears diagonally below the one before it HOT 5
- Question: Is there a way to make what is inside of swipe wrap also clickable? HOT 1
- method of judging amd may cause error:Cannot set property 'Swipe' of undefined
- Multiple Swipe instances? HOT 1
- Using {passive: true} may causes the problem of event conflict on Safari HOT 1
- overlapping slides HOT 2
- A few suggestions HOT 1
- Clicked ignored elements are prevented from default behavior
- Layout is broken if swipe widget is disabled
- react 版本的需要更新一下,升级到16.13.1,应该是16.8以后,componentWillReceiveProps 不建议使用了,等到17就正式不让使用了,麻烦更新一下。 HOT 1
- Layout jump after init HOT 2
- Flex direction row-reverse not working? HOT 1
- continuous为true且children个数为两个时显示有问题 HOT 1
- Desktop weirdness... HOT 1
- slide function directions HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from swipe.