Intrusive Slick Carousel CSS

[daviedR]

Hi guys, is it possible to add highe selector to your custom defined Slick carousel CSS in frontend.css? Some themes might also use Slick carousel for their own elements and your CSS broke the styles.

I know you pasted the original Slick default CSS and then combine them with your own custom CSS. I think the custom CSS declarations should have higher level selector.

For example, it should be:

.elementor-widget-image-carousel .slick-loading .slick-list {
    background: #fff url("../images/ajax-loader.gif") center center no-repeat;
}

instead of

.slick-loading .slick-list {
    background: #fff url("../images/ajax-loader.gif") center center no-repeat;
}

What do you think?

[joshmarom]

Thanks for the feedback.
It will be considered.

[daviedR]

Hi guys,

Somehow the changes were reverted back to the unwrapped version, not sure whose commit. Could you wrap the slick CSS back?

[arielk]

@daviedR We didn't have any change at all. What exactly is the problem?

[daviedR]

@arielk you have revised this before, on this commit:
(88b0a7d)

However, looks like the commit was not merged or perhaps reverted due to some changes on your folder structures (you added dev folder on assets). In current version the wrapping classes you have added in that commit are gone. For instance:

The revised _slick.scss file with the proper wrapping classes (from your commit):
https://github.com/pojome/elementor/blob/88b0a7d31b7ce767838776adea243a7622b7cf83/assets/scss/frontend/_slick.scss

Current _slick.scss file:
https://github.com/pojome/elementor/blob/master/assets/dev/scss/frontend/_slick.scss

Please put back the revised version with the wrapping classes. Your slick CSS broke my native theme's slick styles.

[arielk]

You can go through the line 274 and see the correction of the bug:
https://github.com/pojome/elementor/blob/master/assets/dev/scss/frontend/_slick.scss#L274

[daviedR]

Hmm, I think you need to entirely wrap all slick classes, because you have custom styles under the:

//
// Slick Elementor Theme
//

and

//
//  Custom Style for Elementor
//

They are not default CSS from original Slick package.

In my case, I use Slick for my theme's slider. without Elementor enabled it looks like this:

But when Elementor is activated, it broke into like this:

If you wrapped all your slick CSS to affect your own slider only, my theme's styles woul work normally. Of course, I can create a higher priority styles to override your plugin CSS, but Elementor's slider styles would be the one which broken this time.

It's very important to keep them separated, please wrap your Slick custom styles.

[arielk]

@daviedR Please try this pull #784 and let me know is solve your bug