Hide the slides based on their count

[kiranch05]

Hi Team,

I have 7 items in my carousel & I want to show with three dots.
In first dot, we have three items like below,

In Second dot, I want to show three items but don't duplicate the first slide items like below screenshot,

In third dot, I want to only one item and remaining two places will be empty & don't duplicate the items from before slides like below screenshots,

I need the responsive the design when I move from different resolutions. The main aim was don't duplicate the items when we from one dot to other dot.

Kindly help me to achieve the the procedure. I worked for more than two weeks & I didn't get any solution like above scenario.

Regards,
Kiran

[vitalii-andriiovskyi]

Hi @kiranch05

Maybe it's late.

You need to set options:

{
  loop: false,
  items: 3,
  slideBy: 'page'
}

This will allow to scroll by 3 slides or n slides where n=items set using responsive option

There's one issue here: the last page will show 5, 6, 7 slides not only 7th slide.
This is the basic behaviour of the library. To handle it, you can add 2 empty slides.