CODEWITHSUNDEEP
htmlcsssliderslick.js
leonardeveloper
leonardeveloper

Reputation: 1853

How to hide the overflow of a slider on the left side only?

I've work on multiple implementation of slider using slick slider but am stuck on this one.

I have this mockup that needs to get implemented https://share.getcloudapp.com/DOu86494

However, am not sure how I'm able to hide the items on the left when I tried to set the .slick-list{overflow:visible}

I wanted to only show the overflow on the right side like the design and when I hit the next slide the left side will be the same. Should I just cover it with the left column? Or is there any better idea out there? I already googled relevant problems but I couldn't find any. Am not sure it has something to do with the configuration as well because I can't find same output on the documentation.

Here's my codepen 

$(document).ready(function (){
     $('.story-slider').slick({
            slidesToShow: 2,
            slidesToScroll: 1,
            arrows:false,
            dots:false,
    })
})

UPDATE:

Am almost there! I have to set the opacity of the previous .slick-slide to 0 and set the .slick-active and .slick-active ~ .slick-slide to 1 but now my problem is when the reset or when the iteration happens am getting a flash of all the slides. https://share.getcloudapp.com/6quBEkK7

Upvotes: 0

Views: 6831

Answers (2)

Anıl Odabaşı
Anıl Odabaşı

Reputation: 41

Add to slider container

clip-path: inset(-100vw -100vw -100vw 0);

Upvotes: 4

arbuthnott
arbuthnott

Reputation: 3819

I tried adding a "mask" to cover the overflowing left content

.slick-list{
  overflow: visible;
  padding:0 20% 0 0;
  position: relative;
  z-index: -1;
}

.slick-list::after {
  content: ' ';
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 4000px;
  right: 100%;
  background-color: white;
}

The width of the mask just has to be big enough to cover rest of the page, 4000px was just a random big number. Also, the z-index in the slick-list is so that the mask doesn't cover your other content outside the slider - you could also add a positive z-index to your other content instead.

Edit

As pointed out in the comments, the z-index prevents the function of the slider.

If one really wants to make this solution work, then instead of z-index: -1 on the slider, once can apply a higher z-index to the elements that have to appear to the left. In the pen, I added class over-slider to the left column, and then the following css worked:

.over-slider {
  z-index: 2;
}

.slick-list{
  overflow: visible;
  padding:0 20% 0 0;
  position: relative;
}

.slick-list::after {
  content: ' ';
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 4000px;
  right: 100%;
  background-color: white;
}

I don't like this solution as much because it would have to be applied differently in different situations. But if you're looking at no other solutions, this can work.

Upvotes: 0

Related Questions