Showing the last item half off the screen

[sekoyo]

Hi I have a multiple carousel which has no arrows or dots and I would like to indicate there are more items by showing an item half hidden on the right side. Do you have any suggestions for doing this? Thanks

[kenwheeler]

Center mode does this pretty well

[sekoyo]

Thanks will check that out

[sekoyo]

In case anyone comes across this, center wasn't right for me so this is what I did:

// options
onSetPosition: this.onSetPosition

// a method/func
onSetPosition: function() {
    if (this.$slides.length > this.options.slidesToShow) {
        // Note: don't use this.slideWidth for this.
        var slideWidth = this.$slides.first().width();
        var addValueToEach = (slideWidth / 2) / this.options.slidesToShow;
        this.$slides.width(slideWidth + addValueToEach);
    }
}

[jondotblack]

@DominicTobias I'm looking to produce the same effect, but I assume your solution would only work if you have an infinite scroll. Otherwise won't the last item always be cut off?

[sekoyo]

@blackatlmbrjck I'm not sure actually, shortly after the client decided to have carousel arrows so I removed this. I don't remember it being broken but not sure!

[CarlFredrik]

Late answer, but this is easily achievable by writing something similar to this in the slider settings: slidesToShow: 3.3,

[nikola-wd]

@CarlFredrik This centers it, same effect as if u used centerMode: true.... How to make only next item slightly show

[harryjoao]

@CarlFredrik THANK YOU !!!!!!!!!!

[vagnerolliver]

@CarlFredrik PERFECT!!!!!! tks

[kenold]

Both solutions work OK, but is there a way to not cut the first slide? It's cutting off both first and last slides.

[UPDATE] I set infinite: false and it worked :-)

[alexlamazing]

Both solutions work OK, but is there a way to not cut the first slide? It's cutting off both first and last slides.

[UPDATE] I set infinite: false and it worked :-)

Thanks @kenold . What should I do if I need infinite to be true?

[aronmoshe-m]

This thread saved me so much time; thank you!

[turbowars]

Both solutions work OK, but is there a way to not cut the first slide? It's cutting off both first and last slides. [UPDATE] I set infinite: false and it worked :-)

Thanks @kenold . What should I do if I need infinite to be true?

did you find a solution? I am looking for this.

[lakshbhutani]

Finally, this solution helped me https://stackoverflow.com/questions/60440138/centering-slides-with-react-slick

[chadjaa-sofiane]

I had the same issue when the last item doesn't appear and the slider stops at the center of the screen before the last item be visible. the solution that I found is to insert fake divs inside your slider.

<Slider ....>
    {/* your isintial divs here */} 
   <div/> 
   <div/>
</Slider>

[vipinwap07]

I think there is no rock-solid solution for this issue, but I found a trick.

Inserting an empty div at the end of all items worked for me.

Hope this is helpful.