Progress unable to hit 1 with `perView: 'auto'` at certain viewport widths

[davidwarrington]

Version used: 6.7.0

I've attached some arrows to my slider and I'm trying to hide them when the slider is at the beginning or the end.

Using the implementation shared at the end of #71 (but updated to reflect the newer API, and slightly modified to also support looping sliders) I'm finding that on some screen sizes the "next" arrow is never hidden.

For reference here's the arrow plugin I've written:

const useArrows = ({ next, previous } = {}) => {
  return carousel => {
    next?.addEventListener('click', carousel.next)
    previous?.addEventListener('click', carousel.prev)

    const updateButtonStates = () => {
      const { abs, min, progress } = carousel.track.details

      if (next) {
        next.disabled = progress === 1
      }

      if (previous) {
        previous.disabled = abs === min
      }
    }

    carousel.on('created', updateButtonStates)
    carousel.on('detailsChanged', updateButtonStates)
  }
}

In the example I'm currently testing with a viewport width of 1440px progress can hit 1, with a viewport width of 1415px the progress gets to 0.999 and with a viewport width the progress hits 1.000002 at a viewport width of 1414px.

I'll try to get a minimum reproducible example to share as soon as possible but wanted to share the issue I'm having now in case you have a solution in mind.

[rcbyr]

Thank you for pointing out this problem to me. I will take care of the problem as soon as possible.

[rcbyr]

Hey @davidwarrington

can you tell which version did you used when facing this problem. I couldn't reproduce it with the current version (v6.7.0).

[pcoeper-dd]

I think I am kind of having the same issue with v6.7.0. I have a large container of 1492px width in which I want to display 6 slides. As I want to show a bit more than three slides per view I chose the following options:

this.slider = new KeenSlider(this.sliderRef.nativeElement, {
    initial: this.currentSlide, // = 0
    slides: { perView: () => 3.4 },
    mode: 'free-snap',
    slideChanged: (s) => {
        this.currentSlide = s.track.details.rel;
    },
});

I assume the width of each slide is not calculated correctly since I only see three slides where the third slide is already cropped on the right side. And when I try to navigate to the last slide I have no chance to display it completely. This doesn't happen for smaller screen size e.g. when you open your dev tools to the right side of your screen 😏 Let me know if you need further information!

EDIT: What I just noticed: Maybe it's a problem with the initialization? 🤔 I switched to responsive mode (with Chrome dev tolls) in order to determine the max-width where it stops working and....it looks as I would expect it. When I now switch back (leave responsive mode) everything is still fine!

[Enkil11]

To determine if the slider has reached its end, I utilized the following condition: slider.track.details.maxIdx === slider.track.details.rel

I hope this proves helpful to someone, as it was precisely what I sought when I came across this thread.