Issue with slider indicators count and click functionality.

[harshal759]

Description of the bug Bug Description:

1. Indicator Count: By default, the indicators generated for the slider is dependent on the number of slides present in the slider. So if I'm adding 6 slides but I need to show 3 sliders per page, still there will be 6 indicators when there should only be 2 of them.
2. Indicators click issue: For same above scenario, when navigating through the indicators, the slider does not navigate as expected, for example when I click on the 3rd indicator, the 5th or 6th indicator is highlighted.

To Reproduce Steps to reproduce the behavior:

1. Go to 'https://swiffyslider.com/configuration/'
2. In the configurator, select 3 slides per page
3. Click on each indicators and observe the behavior.

Expected behavior For the first issue, the indicator count should be calculated on the basis of the slider layout, if 3 slides per page is selected and the total slides are 6 then the indicator count should be 2. For the second issue, only the indicator that has been clicked should be highlighted and the slider should be scrolled to the respective slide: https://swiperjs.com/demos#slides-per-view - Reference with a different library.

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: 125.0.6422.76

Smartphone (please complete the following information):

• Device: Realme X7 Max
• OS: Android 12
• Browser: Chrome
• Version:

Additional context As a suggestion, we can add a new feature where we can configure slides to be moved per page and the indicators will also be calculated on basis of that. Please see slick slider from Ken Wheeler for reference. - https://kenwheeler.github.io/slick/

[nicped]

Hi Harshal

Thank you for trying out Swiffy Slider.

I agree that the configuration page does not take that into consideration. In your implementation you just remove the remainder of the indicators from the markup. Simply just include 2 instead of the 6 proposed by the configurator.

Remember that the indicators are not calculated by Swiffy Slider it self - since all of Swiffy slider is simply markup. So it is just the configurator on the doc site that has this problem and not swiffyslider it self.

[nicped]

I see you compare to Swiper - swiper is a lot of JS that creates markup. Swiffy does it the other way around - you create some markup and Swiffy Slider script will slide that for you. Nothing is calculated.

[harshal759]

Hii @nicped ,

Thank you for a quick response.

I agree that swiffy slider is markup based but the thing is that we work on a CMS platform and all that markup is generated on the fly, server side using an templating engine called sightly. Sightly doesn't support any calculation logic. Any suggestions on how we can tackle this issue?

[nicped]

Simply remove or hide indicators you do not need using a bit of JS:

let sliderElement = document.getElementById('mySlider');
let container = sliderElement.querySelector(".slider-container");

let indicators = sliderElement.querySelectorAll(".slider-indicators>*");
let pageCount = container.childElementCount / 2; /*2 is the number of slides per page*/
let indicatorIndex = 0;
indicators.forEach(element => {
    if(indicatorIndex > pageCount){
        element.style.display = "none";
    }
    indicatorIndex++;
});