Limit the number of dots

[JamesZXCVBNM]

Is there a way to limit the number of dots shown in the pagination?

[AlexanderMatveev]

+1

See screenshot:

[micka-fdz]

Hi. I think it would be a good feature to next versions.

[jasperf]

Is there any news on this issue? I also want to limit the number of navigation dots for mobile view at least. I checked out pagination and there seems to be no option for that yet.

I see this example to add numbers instead of dots:

const splide = new Splide( '.splide' );


splide.on( 'pagination:mounted', function ( data ) {
  // You can add your class to the UL element
  data.list.classList.add( 'splide__pagination--custom' );


  // `items` contains all dot items
  data.items.forEach( function ( item ) {
    item.button.textContent = String( item.page + 1 );
  } );
} );


splide.mount();

I would think we could use something like array.slice(-5).forEach() so array.slice (MDN article) to limit the forEach loop for the dot items. Just do not want to limit the slides, just the dots here. And then this should apply to certain breakpoints only as well.

[jasperf]

I tried

const splide = new Splide( '.splide' );

splide.on( 'pagination:mounted', function ( data ) {

	let dots = data.items;
	dots += data.items.slice(-5);
});
splide.mount();

and though the code did not generate errors I did not see a reduction in the number of dots.. And then I still need to deal with mobile. @NaotoshiFujita any pointers would be greatly appreciated.

[jasperf]

Actually even the example did work, only just used as it is it duplicates the pagination dots it seems. And it did not add the same rule to the other two splider sliders on the same page.

Good to know adding the code to global.js is working, but now I need to limit the dots for all three sliders on the same page.

[jasperf]

I did try

const splide = new Splide( '.splide' );


  splide.on( 'pagination:mounted', function ( data ) {
  // You can add your class to the UL element
  data.list.classList.add( 'splide__pagination--custom' );

	let dots = data.items;
	dots += data.items.slice(0,4);
});
splide.mount();

and it does add a new additional row but:

• duplicates navigation dots and adds more dots
• does not apply to other sliders on page instead of 0-4 only
• does not have a solution for mobile only.

[jasperf]

Decided to use

@include media('<600px'){
	ul.splide__pagination li:nth-child(n+7) {
		display: none;
	}
}

for now.

[greenlevel]

I think this is also a nice feature. Any updates on this?

[rwprodev]

I would also like to see this feature added, especially for mobile where the dots overrun the edges of the page.

[Jehu]

Here's a custom code solution. This code generates a custom pagination. Therefore you need to disable the Splide pagination with the option pagination: false. You can configure the number of visible pagination dots via MAX_DOTS.

The active dot is moved from left to right and starts at the left if the end of the MAX_DOTS is reached. So the user can see that there is something happen when using the Slider.

See the gist at https://gist.github.com/Jehu/1f4038fdbcf9ee8c0b5a58cefd7cbbfd