WordPress.org

1. controlb
   Member
   Posted 7 months ago #
   

   I worked out how to move the image to the left and the text to the right:

   .da-slide-current h2, .da-slide-current p, .da-slide-current .da-link {left: 40%}
   .da-slide .da-img { top: 15px; text-align:inherit; width:auto; height: 250px; left: 15%;}

   However, the image and text swap back to their default positions as soon as the slide animation begins. Is there any way of avoiding this?

   http://wordpress.org/extend/plugins/wp-parallax-content-slider/

2. controlb
   Member
   Posted 6 months ago #
   

   Welcome back, Julien! Could I get a reply to the above, please?

3. wp-maverick
   Member
   Plugin Author
   Posted 6 months ago #
   

   Hi controlb,
   You shoud better try to change the CSS animations to do that.
   See styles.css.
   Y can see 2 types of animations:

   • 'toLeftAnimX' or 'toRightAnimX': animations for content leaving the page
   • 'fromLeftAnimX' or 'fromRightAnimX': animations for content entering the page

   They consist of values at the beginning (0%) of the animation and values at the end of the animations (100%): opacity and position

   Just try to invert these values and let me know if it works better.

4. controlb
   Member
   Posted 6 months ago #
   

   Inverting the values doesn't seem to alter the initial positions of the text and the images before or after the animation begins. Could a left/right option be put in the admin?

5. wp-maverick
   Member
   Plugin Author
   Posted 6 months ago #
   

   Hi controlb,
   and thanks a lot for your contribution to this support thread, that's very helpful!!!

   As I've already said on my bebsite, almost everything is possible with CSS but the problem here is you’ll have to change also all the animations.

   As soon as an animation begins, even if you’ve moved the images and texts in the slides, their positions are re-evaluated and that’s the reason why you see this reverted effect… So basically, I think you have to re-think the CSS entirely.

   A solution would be to let the user choose between two CSS stylesheets but I've decided to keep things simple in the admin panel because everyone will have specific display needs and it's impossible to manage all the CSS properties dynamically.

   I know this plugin can be improved and I've a lot of things in my TODO list but unfortunately I don' have much time to develop them.

   If someday you write this alternate CSS stylesheet, feel free to share it with me and I could add it to the plugin :)

   Regards ;)

6. controlb
   Member
   Posted 5 months ago #
   

   Finally worked it out!

   I swapped all instances of the da-img animation number (e.g. '4' in 'fromRightAnim4') for the h2 and p ones. (I don't use .da-link so that doesn't feature in the solution.)

   So for example, this:

   .da-slide-fromright h2{
   	-webkit-animation: fromRightAnim1 0.6s ease-in 0.8s both; ...
   
   .da-slide-fromright p{
   	-webkit-animation: fromRightAnim2 0.6s ease-in 0.8s both; ...
   
   .da-slide-fromright .da-img{
   	-webkit-animation: fromRightAnim4 0.6s ease-in 0.8s both; ...

   becomes this:

   .da-slide-fromright h2{
   	-webkit-animation: fromRightAnim4 0.6s ease-in 0.8s both; ...
   
   .da-slide-fromright p{
   	-webkit-animation: fromRightAnim4 0.6s ease-in 0.8s both; ...
   
   .da-slide-fromright .da-img{
   	-webkit-animation: fromRightAnim1 0.6s ease-in 0.8s both; ...

   I also changed all the 60% values to 40%, but that was pretty much it.

   I've posted the full CSS up at http://shorttext.com/QJ52sSlsoCFXnoA for you to check out. Notice I tagged up all the original values too - I took a bunch of wrong turns before I got there.

7. wp-maverick
   Member
   Plugin Author
   Posted 5 months ago #
   

   Great work :)
   I'll test that and maybe add it to the plugin.

8. sschand88
   Member
   Posted 2 months ago #
   

   Hi controlb,

   Thanks a lot man, i was worried about this image and text swapping for the slider and you just saved my day.

   Thank you sooooo much.

   Chand.

Reply

You must log in to post.