[Resolved] Transition Effect Slide Right Is transiting slow

[Author]

Posts

[hadiN]

Hello Toolset Team..

I've created a slider with the toolset view for my news (last section before footer) , and it is suppose to be an slide automatically so i've set the the Pagination enabled with automatic AJAX transition option with (Transition Effect: slide right).

Link to a page where the issue can be seen: hidden link

My Problem is that the image is loaded before the text.
Notice that the text on the right shows after some delay after image is loaded .

Can you help me with that please ?

[Christian Cox]

Hello, I see a couple of JavaScript errors related to the Leaflet map code on this page:

Uncaught SyntaxError: Unexpected identifier .... (index):1967
Uncaught SyntaxError: Unexpected token .... (index):1993

Can you resolve these two errors so we can troubleshoot the slider more effectively? Thank you!

[hadiN]

Hi again,
I've resolved these two errors.
If you need login details. please mark the next replay as a private one so i can do.

Thanks in advance

[Christian Cox]

Private reply fields are available here.

[Christian Cox]

Hi, I'm still working on this and I will update you tomorrow when I have more information. Thanks for your patience.

[Christian Cox]

It seems this code is why the background changes before the text:

<style type="text/css">
 #p_bk_img {
      height:100%;
      background-image: url('{!{wpv-post-featured-image size="full" output="url"}!}') !important;
      background-size: cover; 
      background-position: center;
      -webkit-transition: background-image 0.2s ease-in-out;
     transition: background-image 0.2s ease-in-out;

} 
</style>

Since the slider is set to preload the code from the next page, this CSS code is loaded before the transition, changing the background image. My suggestion is to place the background-image attribute in the div tag using a "style" attribute. This will not modify the background image of the current slide, only the upcoming slide:

<div style="overflow: hidden; background-image: url([wpv-post-featured-image size='full' output='url']);" id="p_bk_img">   </div>

Then remove the background-image definition from the style tag above:

<style type="text/css">
 #p_bk_img {
      height:100%;
      background-size: cover; 
      background-position: center;
      -webkit-transition: background-image 0.2s ease-in-out;
     transition: background-image 0.2s ease-in-out;

} 
</style>

[hadiN]

I suspected that it was causing the problem.
But since this problem was happening only when i use the (slide right) transition. (other transition effects works fine, no delay between the text and the image of the post ). I dropped this suspicion.

Anyways Your solution has worked perfectly.
Thank you very much.

[hadiN]

My issue is resolved now. Thank you!