Comments (3)
Within the process of a slide, we have 3 periods (timelines), 1:'Play in' --> 2:'Idle' --> 3:'Play out'.
And we have 3 types of transitions, 't', 't2' and 't3'.
't' plays to appear, 't2' and 't3' plays to disappear.
If 't3' is specified, 't2' will be ignored. The difference of 't2' and 't3' is that 't3' is in the timeline of 'Play in', 't2' is in the timeline of 'Play out'.
from slider.
Given a caption specified with a transition name, you can (not necessary) make
a bit change of behavior by specify 'd', 'du', 'x', 'y', 'z', 'r', 'f', 'b' atrributes.
<div u="caption" t="transition-name" d="-300" du="600" x="0.6" y="0.6" z="3" r="0.2" ...>...</div>
<div u="caption" t2="transition-name" du2="600" x2="0.3" r2="3" ...>...</div>
<div u="caption" t3="transition-name" du3="1800" x2="4" f2="0.5" ...>...</div>
d: a numeric value in milliseconds means delay of animation
du: a numeric value in milleseconds means duration of the animation
x: a numeric value in ratio means the caption will fly horizontal by distance of
parent container width
y: a numeric value in ratio means the caption will fly vertical by distance of
parent container width
z: a numeric value in ratio means the caption will zoom by
r: a numeric value means the caption will rotate by, 1 equas 360 degree.
f: a numeric value (from 0 to 1) means the caption will fade by.
b: a numeric value (in milliseconds) indicates an explicit begin time to start
animation. By default, captions play in one by one. But if a caption specified
with 'b' explicitly, it breaks the streamline.
Note: 'du', 'x', 'y', 'z', 'r' and 'f' can be percentage value, if a percentage value
is specified, the final behavior is a percent of original transition.
Reference: http://www.jssor.com/development/slider-with-caption-jquery.html
from slider.
I thank you for your detail answer the link to documentation.
from slider.
Related Issues (20)
- Why does jssor issue a page request for every slide? HOT 6
- vuejs version HOT 8
- What is the correct way to add a youtube video as a slide? HOT 1
- Transition code of the website is not possible to use in the jquery code HOT 2
- $ScaleSize Does not work correctly HOT 1
- jssor instance wordpress HOT 2
- HTML code work properly but when ng-repeat use then all images show in page in angularjs. And when i click next button then all images work properly one by one HOT 1
- carousel-slider.slider with Bootstrap modal
- For mobile full screen slider how can i assign slide number for each slide For ex( 1 to 10 ) HOT 1
- $CurrentIndex() issue on first load HOT 2
- You need to remove the event.keyCode because it's Deprecated HOT 7
- jssor fails tests because its still using non-passive Event Listeners HOT 2
- Optimize responsive HOT 1
- $JssorSlider$ error shows in React js for using jssor-slider
- Animations breakpoints no longer work since update from 27.5 to 28.0 HOT 2
- Font-size too big on mobile
- Lazy loading and SEO
- not compatible with iPad?
- Unable to insert caption below image
- Slid2
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 slider.