Slider items appears as white space

[Bia]

Randomly, the images from the slider are appearing as white space. If you know what could be causing this, please let me know. Many thanks.

 

Edited July 4 by Bia

[Stefanowitsch]

59 minutes ago, Bia said:

Randomly, the images from the slider are appearing as white space. If you know what could be causing this, please let me know. Many thanks. Otherwise, if your response is just to share jokes about noobs, spare me.

 

@Bia is this a ProcessWire-Releated question or does a third party plugin like Owl Carousel or the Slider Component from the UIKit frontend framework not work properly?

If possible please provide a link to this page, based on the image and the description it is impossible to help. There could be many different reasons the slider is showing white spaces like:

- missing stylesheets
- incorrect image paths
- initialization errors (on the java script side)
- Markup errors
- etc. etc.

[Bia]

1 hour ago, Stefanowitsch said:

@Bia is this a ProcessWire-Releated question or does a third party plugin like Owl Carousel or the Slider Component from the UIKit frontend framework not work properly?

If possible please provide a link to this page, based on the image and the description it is impossible to help. There could be many different reasons the slider is showing white spaces like:

- missing stylesheets
- incorrect image paths
- initialization errors (on the java script side)
- Markup errors
- etc. etc.

Hello many thanks for the reply. Here is the link to the page I am talking about: https://silcar.ro/en/about-us/, I think it's Slick Carousel

[Stefanowitsch]

5 minutes ago, Bia said:

Hello many thanks for the reply. Here is the link to the page I am talking about: https://silcar.ro/en/about-us/, I think it's Slick Carousel

Thanks. Looking into the DOM tells me that the background image is missing for the slide:

<div class="carousel-thumb js-slide slick-slide slick-current slick-active" style="background-image: url(&quot;&quot;);background-size: cover;width: 1836px;position: relative;left: 0px;top: 0px;z-index: 999;opacity: 1;height: 620px;" data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00">                                                         
</div>

 

[bernhard]

4 hours ago, Bia said:

Otherwise, if your response is just to share jokes about noobs, spare me.

I haven't seen this happen for over 10 years as it's a very friendly and helpful community and it's also part of our community guidelines: https://processwire.com/talk/topic/8234-community-rules-guidelines/ 😉 If you see anybody violating the rules just contact one of the moderators - no need to blame anybody upfront. Thx

[Gideon So]

@Bia

If you share more how you build your slider, such as your template code, would be helpful for us to give you some real helpful hints.

Gideon

[virtualgadjo]

hi,

having a look at the console, you'll see a missing image
https://silcar.ro/site/assets/files/3713/sediu_silcar.1846x0-is-pid1143.jpg

maybe the blank one...? the name of the image may let think it's a variation generated by a module or an image resized on the front side using php or js, can you see the original image in the page admin?
apart from this (and all the things blocked by ublkock), i can see a problem with a base64 request that doesn't seem to be well formatted,  and thus having a CORS issue

in case it helps

have a nice day