Time delay on individual slides

User 188640 Photo


Registered User
895 posts

I'm working on a test slider that I'm trying to put pictures and text slides in the slider. I can't find any info in the user guide about changing the timing on individual slides.

I want the text slides to show longer so they can be easily read.

If I change the delay on the slide tab it changes for every slide. If I change the delay on the animation tab the slide goes blank for that time and then appears.

Are there any articles that I haven't found that go into this?
A Rose is Just a Weed in a Corn Patch!
User 379556 Photo


Registered User
1,558 posts

Might this help perhaps? It mentions the Duration rather than the Delay.

Frank
User 244626 Photo


Registered User
811 posts

Yes you can set the individual slide time differently as long as you choose the custom setting on the animation tab for global animation settings (at the very bottom of the drop down). Then further down you will see the element animation and the box for "display slide for" is check marked for Global animation. Remove the check an adjust the time for the slide you have selected and adjust the slide time
The thing is.....when you go custom on the Global animation settings at the top, we lose the ability to use the smooth fade in fade out which I really would like to have as an option. Smooth is only available in the Global settings. :/

I also discovered that by assigning an id to a paragraph (or most elements) I can then animate the element by changing the animation settings "apply to" for the element selected to "id" then setting the delays and times. Still working with this ....
This is how the 44 animations become available to use to control timing and delays of elements (as in the 3rd slide of the "Present Animated" Template.
Bootstrap 5 CSS Grid.
User 188640 Photo


Registered User
895 posts

Frank,
I looked at the post you referenced and started from there but ran into a glitch. But, thank you for the info as I don't think I read that post.

Twinstream,
Yes, I really wanted to do this with the smooth fade in and out. I'll work with it tonight and see what works the best.
A Rose is Just a Weed in a Corn Patch!
User 244626 Photo


Registered User
811 posts

I stumbled upon the answer I have been looking for about the fade in fade out which can be called a crossover or cross fade between slides. You need two pictures per slide one on top of the other. The top picture is the picture of the next slide. After giving both pictures id's choose the top picture and go the the animation settings which will have to be set to custom for the top animation field underneath Global Animation Settings. Leave all the Global Animation Settings set to none. In the Element animation make sure you have selected you correct top picture with the right id you assigned. Assume you have a slideshow that changes slides every 8 seconds. Go to the bottom where the selector animation is and change the "apply to" to "id". This controls just the animation of the top slide. Change the state to animate in. Set the delay to 6 seconds with a duration of 2 seconds. Now change the Element Animation "IN" above this to "fade in" . Leave "Out" to "Globally defined".
What happens is at 6 seconds into the first slide the top picture of the next slide begins to fade in over the bottompicture of the first slide that was already showing. Then when the second slide changes instantly you are just seeing the same picture again but of the second slide. Now we can begin to add the animations of other elements with delays also. :cool:
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

I should mention this works for autoplay with the option of play and pause. If you are using the player controls previous and next it could be done however everything would have to be done on the next slide to control the duplicity of the end of the first slide. That will take more work.....
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

So this does work if you wanted to use previous and next controls. The top image of the current slide will be the actual image you want to display. The bottom image is the one of the previous slide. You will not need a delay but just set the duration of the top image to 2 or 3 seconds for fade in using the "id". I thinks a auto play with previous next controls is out of the question...:rolleyes:
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

So going backwards with the previous does not work. Only one way like the autoplay. Would need to probably use the button links instead of the player controls and add additional slides to handle the reversing action. 8 slides would need 16 to handle the animation crossfades. :(
Bootstrap 5 CSS Grid.
User 188640 Photo


Registered User
895 posts

Thanks for filling up the rest of my afternoon. :lol:

I am going to give this a try and see what it looks like.

Twinstream, you have a lot more time on your hands than I do. :lol:
A Rose is Just a Weed in a Corn Patch!
User 188640 Photo


Registered User
895 posts

OK, how do we get one picture on top of another picture? I can put two pictures on the same slide but one is above the other and not on top. :/
A Rose is Just a Weed in a Corn Patch!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.