Unexpected line on slider image (Finsweet CMS list slider)

Design help General
1

Hi, I’m using the CMS list slider from Finsweet on my product page. It works fine, but I can’t figure out why there’s a line appearing on the left side of my second image. It looks as if the images are not overlapping correctly. I can confirm there’s no border, no padding, and it’s not coming from the image itself. Do you know where the problem might be coming from? Thanks

2

Has anyone encountered the same issue?

3

Check if the slider mask or slide wrapper has overflow: hidden and no 1px transform offset , I’ve seen Finsweet sliders render a faint line when the slide width rounds unevenly. Try setting the slide to flex: none; and add backface-visibility: hidden; on the image.

1 Like
4

Hey @Drover ,

The faint line that you see on the second image, is likely from the next slide image that is visible. You can explore the width properties of the elements to troubleshoot this and ensure the residual elements are not visible in the current slide.

Alternatively, you can add this in the ‘Inside head tag’ section of custom code in the page you want to implement the slider:

<style>
  .w-slide[aria-hidden="true"] {
    opacity: 0 !important;
  }
</style>

Save and publish the site and see if it helps.

1 Like
5

Thanks! All good with your custom code :wink:

1 Like