Each picture inside the carousel overflows into the next picture

[patrickhuang94]

I'm using the default example code to put in my images: simply wrapping it inside the Slider component. In the right ~10px margin of the current picture, you can see the next picture - it's sort of leaking into the current picture. However, upon downsizing the browser window and resizing it back to the original full screen, the second picture in the carousel no longer overflows.

[joinjoohny]

Same issue

[fafafariba]

Same

[adeelibr]

Same

[msiadak]

I'm seeing similar behavior. It seems like it fixes itself after a browser resize event, but I can't even figure out a hacky way to do this consistently in React.

[adeelibr]

I have found a solution simply in your CSS in your body tag do something like this

body {
    overflow-x: hidden;
}

I hope it helps anyone having this trouble.

[marhalpert]

It happens to me when it is server side rendered.

[adeelibr]

@marhalpert Have you tried the CSS trick I used at my end to resolve this bug.

body {
    overflow-x: hidden
}

[marhalpert]

Mate that worked for when it is not server-side rendered.

[adeelibr]

Well I hope someone comes up with a solution for this. :)

[brownsmith]

It's not ideal, but I found forcing the component to update after mounting essentially mimics what happens when the browser window is resized, and leaves it looking as it should.

componentDidMount() { setTimeout(() => { this.forceUpdate(); }, 0); }

[KevinTaron]

@brownsmith thx 4 this solution. Not perfect but still works.

[kagadek]

Still having the bug - after some digging I think it calculates the carousel element width and transform wrong - when page with carousel has a scrollbar everything looks fine.

With and without scrollbar the slick-track and carousel elements have the same widths, so without scrollbar image of the next element overlaps with offset equal to scrollbar width. Screens below based on jsfiddle demo of react-slick.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[epenabella]

create an overlay div to block the 1px strip of the next pic

technically speaking: set parent div position relative, create child div width 1px height 100% position aboslute top 0, right 0 background color same as background behind carousel

:)

[alfredrafael]

epenabella, can you provide a demo? Thanks :)

[epenabella]

parent is the div the one that you put the carousel in, child is another div as sibling to carousel

CSS: .parent { position: relative; } .child {width: 1px; height: 100%, position: absolute; top: 0px, right: 0px; background-color: #;}

[sbaqthiar209]

I am using single image and I am targeting active slide. This will scale the active slide and hide extra space.

:global(.slick-active){ scale: 1.1 1; }