Jump to content

Slider items appears as white space


Bia
 Share

Recommended Posts

Posted (edited)

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.

 

image.thumb.png.fc2f5a1dd1a023a36ca03591919407d7.png

Edited by Bia
Link to comment
Share on other sites

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.

 

image.thumb.png.fc2f5a1dd1a023a36ca03591919407d7.png

@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.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

 

  • Like 2
Link to comment
Share on other sites

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

  • Like 7
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...