conflict with elementor image carousel

Hello @qacqatar

Can you please share screenshot of the issue?

Your site is password protected

https://ibb.co/zGq7JP6

@qacqatar

Hi mate, we can’t understand the issue with the screenshot you sent us, could you tell us in more detail or send another screenshot?

Regards.

You can see in screenshot there arrow is not coming properly which means arrow should come left and right of the carousel but it comes down of carousel and both are coming togeather i hope you understand my concern. Thanks

I can confirm this problem and that it is due to your plugin. Not only are the next/previous controls misplaced, but the space between the title and the dots is incorrect.

Hello @qacqatar @tslarkin

Could you kindly provide information about the themes you are currently using? We are trying to determine whether the issue persists solely with the Elementor plugin or if it is also related to the theme. Our attempts to replicate the problem have been unsuccessful when only the Elementor plugin is installed.

I use the Elementor Hello theme. Also I didn’t make clear that I use Elementor Pro.

I am using Elementor Hello Theme with Elementor Pro.

Hello @qacqatar @tslarkin

Can you please confirm if the issue is only with elementor pro?

It happens whether Pro is enabled or not.

we’re unable to reproduce this in our end

please contact us via facebook here

https://www.facebook.com/quadlayers

we will need to debug this directly in to your site

I think I figured out the problem.

Without SFG, the previous widget, ‘<‘, in the image carousel has the class .elementor-swiper-button and CSS

.elementor-swiper-button {
    position: absolute;
    display: inline-flex;
    z-index: 1;
    cursor: pointer;
    font-size: 25px;
    color: hsla(0, 0%, 93.3%, .9);
    top: 50%;
    transform:translateY(-50%)
}

With SFG, the class is not found, and no CSS is applied except the default

display: block;

This happens because both Elementor and SFG load a CSS file named “swiper.min.css”. Your CSS file replaces Elementor’s, so the desired class is not defined.

If you renamed your CSS file, I think the problem would go away.

• This reply was modified 1 year, 9 months ago by tslarkin.

To continue from my previous comment, if I add the code below to the end of your swiper.min.css, the problem with the previous and next buttons goes away. The pagination swiper (dots) are still incorrectly placed. This is probably due to another Elementor class that has been removed by your css file.

.elementor-swiper-button {
    position: absolute;
    display: inline-flex;
    z-index: 1;
    cursor: pointer;
    font-size: 25px;
    color: hsla(0, 0%, 93.3%, .9);
    top: 50%;
    transform:translateY(-50%)
}

.elementor-swiper-button-prev {
    left:10px
}

.elementor-swiper-button-next {
    right:10px
}

I had hoped that the new release which states “Fix Instagram feed carousel layout” would fix the Elementor conflict. It didn’t.

Hello @tslarkin

We havent been able to reproduce this issue in our end yet

Please provide detailed steps to reproduce the issue

The issue is on Social Feed Gallery or elementor modules?