Inline style of slides are been removed

[dieterc]

When the slider is been loaded, all the inline styles for each slide are been removed. I need the inline styling because I set the background image dynamically. I checked if all the attributes are being removed and that is not the case.

A dirty workaround now is to add a data attribute with the inline styles and when the slider is loaded copy that to the styles attribute.

But why are the styles beene removed in the first place?

[seunafara]

I have this problem too, It just takes all the styles I set to the div and throw them away, this was not how the original slick js did it. I have a version in raw js but It's just bad with this package

[rshelnutt]

No info/updates on this?

[Seeman13]

I have the same problem with slider. If page run first time - all are ok. When navigating through pages in SPA all styles are removing from slide. Someone did solved this?

[victorighalo]

Similar problem here too. Argh!!!

[ErriourMe]

You can avoid this using :style="'...'" instead of style="..." I don't know how, but it works...

[seunafara]

Hi guys the simple way to fix this is like so:

< div class="slider-wrapper">

< VueSlickCarousel v-bind="slickOptions" >

< div class=“box” >1< /div >
< div class=“box” >2< /div >
< div class=“box”>3< /div >

</ VueSlickCarousel >

</ div>

.slider-wrapper {
  width: -webkit-fill-available;
  width: -moz-available;
  width: 100%;
  overflow: hidden;
}

[seunafara]

I forgot to add that properties of classes of elements within the VueSlickCarousel that’s being overwritten should be marked with !important . The above answer was to make sure the slider works and stays in place.

e.g

.box {
 width: 90% !important;
 }

[rshelnutt]

The primary issue/concern here is that this happens to begin with. While there may be workarounds, those come with a host of their own problems.

@seunafara Important flags on CSS, especially with dynamic components is very bad practice (for good reason). It's a last resort and is usually only needed (rather, should only be needed) in very niche circumstances. While this may work for some in the meantime, it should not be considered a globally acceptable solution.

@ErriourRU Using :style attribute just bypasses VSC's apparent programatic removal of inline styles; this attribute type is specific to Vue, which compiles it afterwards in proper format before displaying. Depending where VCS's style removal occurs during the lifecycle, it may (and sometimes may not) also remove styles applied via :style. In my instance, it was still stripped completely.