[Resolved] Issues in transition effect and css

[Author]

Posts

[Vikram]

I am trying to create image slider from "Featured Image" of posts with certain category. I am attaching a screenshot for having glance on entire code.

In output/preview there is space left only in the bottom between image and outer div (css frame). I have added css red border to image to clearly notice the same bottom space. As in screenshot the <div class="my-slider"></div> is kept outermost and when I keep it as first child element inside [wpv-layout-start] [wpv-layout-end], in output/preview the css frame is perfect with no unnecessary spaces from any sides. But the outer css frame will also start fading with images/slides, which is not the required output. The expected output should be a css frame and images rotating within that css frame.

Apart from this unnecessary space in the bottom between image and the outer css frame, there is unexpected behavior in transition. After the first loop of showing all slides/images, next loop onward the slides along with fade effect also shows top-to-bottom growing div(css frame) effect which is random and may or may not be seen on every page load. For the same I have added another image (.gif) attachment. Maybe fixed height of that outer div (css frame) may resolve it but I need to make sure everything is responsive so no absolute values.

How should I resolve these two issues?

[Shane]

Hi Vikram,

Would you mind allowing me to have a link to see the issue first hand ?

I've seen this issue before and is sometimes caused by a theme or some plugin conflicts.

IF you were to recreate the slider, what happens ?

Please let me know.

Thanks,
Shane

[Vikram]

Since its development phase so its all on localhost. Theme is OceanWP and Elementor Pro as page builder. Plugins include all toolset family plugins and Woocommerce. Further Gutenberg plugin just to test how it works but using Elementor to design. Also I recreated the slider with same environment. I try to edit page with Elementor and from widget area, I drag-n-drop Toolset View widget on the page and select the respective Slider View. When try to preview the output it shows same output with unnecessary space in the bottom as in screenshot above. Somehow this time the growing from top-to-bottom effect of outer css frame as in screenshot above is not seen which is as expected output.

How shall it be resolved now?

[Vikram]

While weekends there would be no response at all and now even during working week days so slow responses. I just wonder what would be the situation due to such response speed or support level when clients are in trouble with most critical stage while their website is live. Even on free forums and platforms for helping developers or coders responses arrive within few minutes or hours. Strange to see here even after having paid accounts or subscription we have to wait so long.

[Shane]

Hi Vikram,

In order to help speed things up a bit, would you mind providing me with a copy of the site so that I can test here locally?

Things are really busy here in the forums so some delay is expected but i'll try to assist you as quickly as I can.

To provide the copy please have a look at the link below.
https://toolset.com/faq/provide-supporters-copy-site/

Thanks,
Shane

[Shane]

Hi Vikram,

Just an update here ive received the duplicator package and will post any update as soon as I can.

Thanks,
Shane

[Shane]

Hi Vikram,

So I took a look at this and the issue seems to be caused by your server.

I restored the duplicator on my localhost and when I checked the slider I was not able to see the issue that you were experiencing.

If you were to put this up on a live server to see if the issue is still there then I can have a look there but for now the issue does not happen on my end.

Thanks,
Shane

[Vikram]

I tried on live hosted website and indeed it is working fine. Although the issue is resolved now but can't understand how that technically made difference is css on localhost and live server when I am using same machine browser to access both. Anyways thank you for the help!