Welcome, Guest

TOPIC: Slider

Slider 8 years 6 months ago #258

Christian Schmidt
Offline
New Member
Posts: 3
Karma: -4

Hi,
i am from germany. my english is not really good...but i try:

i created a slider with animate it. All ist good but the main problem is to run the animation after another in the SAME place/container.
if the first sliderimage is out then - but only then - the next sliderimage shoud start with the in-out-animation in the same container.
i solved it with long code (with a setinterval function and display:none) but i think it is a bad solution.

[edsanimate animation="bounceIn" delay="1" duration="1" infinite_animation="no" animate_on="" ]
<div id="div1"><img class="animated bounceOutLeft delay4" src="http://www.anywhere-anytime.de/wp-content/uploads/2015/10/s1-1280x540.png" alt="slider1- me" width="100%" />
</div>[i] // first slider-image in-out-animated[/i]
[/edsanimate]

[edsanimate animation="bounceIn" delay="9" duration="1" infinite_animation="no" animate_on="" ]
<div id="div2" style="display: none;">
<img class="animated bounceOutRight delay7" src="http://www.anywhere-anytime.de/wp-content/uploads/2015/10/s2-tablet.png" alt="slider1-me" width="100%" /></div>[i]// second slider-image in-out-animated[/i]
[/edsanimate]

[edsanimate animation="rotateIn" delay="9" duration="9" infinite_animation="no" animate_on="" ]
<div id="div3" style="display: none;"><img class="animated rotateIn delay1 duration1" src="http://www.anywhere-anytime.de/wp-content/uploads/2015/10/s3-sm.png" alt="slider3-me" width="100%" /></div>//third slider-image in-animated
[/edsanimate]

Jquery:

setTimeout(function(){ $("#div1").css("display","none"); }, 4000);
 setTimeout(function(){ $("#div2").css("display","block"); }, 4000);
 setTimeout(function(){ $("#div2").css("display","none"); }, 9000);
 setTimeout(function(){ $("#div3").css("display","block"); }, 9000);

(result: www.anywhere-anytime.de)

Any ideas for a shorter solution?

The administrator has disabled public write access.

Slider 8 years 5 months ago #264

eLEOPARD
Offline
Administrator
Posts: 409
Thank you received: 54
Karma: -28

Dear Christian,

Thanks a lot for using Animate it. I believe you can do this by following these steps:

1. Wrap the whole animations in a main wrapper with a class (e.g. slideshow-wrapper)

The code would look like this:

<div class="slideshow-wrapper">
[edsanimate animation="bounceIn" delay="1" duration="1" infinite_animation="no" animate_on="" ]
.
.
.
All the Edsanimate blocks in here
</div>

2. After this, add the following classes to you style.css:

.slideshow-wrapper{
    position: relative;
}

.slideshow-wrapper > .animated{
    position: absolute;
    top: 0;
    left: 0;
}

Let me know if you face any issues.

The administrator has disabled public write access.

The following user(s) said Thank You: Christian Schmidt

Slider 8 years 5 months ago #269

Christian Schmidt Offline New Member Posts: 3 Karma: -4	It works very fine (without any javascript)! Ty ty ty ty....
	The administrator has disabled public write access.

Slider 8 years 5 months ago #270

eLEOPARD Offline Administrator Posts: 409 Thank you received: 54 Karma: -28	Glad to know it worked Please show your appreciation by giving a good review to the plugin: https://wordpress.org/plugins/animate-it Have a nice day.
	The administrator has disabled public write access.