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.