CODEWITHSUNDEEP
jssor
Mahbub
Mahbub

Reputation: 3118

Jssor Slider captions start all together

Have a look at this demo. As you can see captions are being animated one after another. Is is possible to have all the captions start together but with specific delay. Like

  1. Caption 1 after 100 milliseconds
  2. Caption 2 after 500 milliseconds
  3. Caption 3 after 800 milliseconds

I know all the animations can be flattened by using $PlayInMode: 1 in config but that doesn't do the trick I'm looking for. I was looking for an option like slider revolution in this example. Notice that all the animation elements do not come one after another. There are overlaps. It's like animation in multiple layers in a timeline in flash.

Anyone has any idea if this can be achieved by jssor ?

Upvotes: 1

Views: 403

Answers (1)

jssor
jssor

Reputation: 6985

You can use b attribute to specify begin time for caption animation.

<div u="caption" t="transition-1" b="100" ...>...</div>
<div u="caption" t="transition-2" b="500" ...>...</div>
<div u="caption" t="transition-3" b="800" ...>...</div>


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.

Reference: http://www.jssor.com/development/slider-with-caption-jquery.html

Also, if you want to play caption one by one, but overlap sometimes, you can use d attribute.

<div u="caption" t="transition-1" ...>...</div>
<div u="caption" t="transition-2" d="-300" ...>...</div>
<div u="caption" t="transition-3" ...>...</div>

The code above enables the 2nd caption start 300 milliseconds before the end of 1st caption.

Upvotes: 1

Related Questions