splide icon indicating copy to clipboard operation
splide copied to clipboard

Using focus: 'center' uses slide count instead of page count for pagination dots and does not respect the perPage

Open zizther opened this issue 1 year ago • 1 comments

Checks

  • [X] Not a duplicate.
  • [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4.1.4

Description

I have a slider which contains 10 slides. I want to have 2 slides per page and move 2 slides at a time. The config below is what I am using and it works fine, the arrows move 2 slides at a time and there are 5 pagination dots.

{
    drag: true,
    gap: '24px',
    type: 'loop'
    perMove: 2,
    perPage: 2
}

When I want to change the focus to the center using focus: 'center' it changes the number of pagination dots to 10 (or the total number of slides). I feel that this should still respect the number of pages there are instead of the number of slides, as it still moves 2 slides and ends up skipping pagination dots.

Reproduction Link

No response

Steps to Reproduce

  1. Create a slider with this config:
{
    drag: true,
    gap: '24px',
    type: 'loop'
    perMove: 2,
    perPage: 2
}

You should notice the number of pagination dots is half that of the number of slides, which is calculated based of the perPage value and number of slides (number of slides divides by perPage).

  1. Update the config to include the focus setting:
{
    drag: true,
    gap: '24px',
    type: 'loop'
    perMove: 2,
    perPage: 2,
    focus: 'center'
}

The number of pagination dots are now related to the total number of slides.

Expected Behaviour

If this is the expected behaviour, it would be good to have a setting to only show the number of pagination dots related to the perPage setting and not number of slides.

zizther avatar Apr 20 '23 19:04 zizther