Feature Request: Group Slide

[AndrewBogdanovTSS]

Although currently there is a way to display multiple slides per view I wasn't able to find any built it way to make it work properly with controls. Provided controls example only account for one slide per view, but what I would like to do is to slide per view when user clicks on the arrow or dot. Amount of dots should also represent the amount of views, not slides.

[rcbyr]

Hello @AndrewBogdanovTSS

you can make this work with a few changes. See here: https://codesandbox.io/s/keen-slider-navigation-vue-forked-qd9l6?file=/src/Slider.vue

But it's not a 100% solution. I will provide a built-in possibility in the next version.

[AndrewBogdanovTSS]

Solution you provided has issues:

1. It's not scrolling per screen which is more preferable with such setup
2. It has issues with different number of slides, for example if number per view is equal to 3 in your example - dots are not highlighted correctly when clicking: https://codesandbox.io/s/keen-slider-navigation-vue-forked-ewbdf

[AndrewBogdanovTSS]

In case inspiration is needed - here you can see how that feature can look like: http://ganlanyuan.github.io/tiny-slider/demo/#base_wrapper

[phoebusryan]

Is there an update for this case? I need dots for a slider with slidesPerView > 1 AND breakpoints that change the slidesPerView Option... :-/

[jordie23]

Would love to see this. Has anyone got a way to do it now?

[jordie23]

Actually, I think this might be a solution? https://github.com/rcbyr/keen-slider/issues/130

[nghiepdev]

Currently .details() no longer available. Also, this feature is needed when using perView: "auto" It is difficult to calculate the number of sliders on the current page.

For example: https://codesandbox.io/s/summer-rgb-wnhxmv?file=/src/App.tsx

.keen-slider__slide {
  min-width: 250px; // 3 sliders
}

@media (min-width: 1000px) {
  .keen-slider__slide {
    min-width: 150px; // 5 sliders
   }
}

Maybe we need an option to set a number of slides going on one "click"

perMove: number | 'auto' 

perMove: 'auto' automatically calculates the number of sliders.

[ToshY]

I'm not really sure about some of these outdated answers, but the following works for me (works with breakpoints):

arrowLeft.addEventListener("click", function () {
  slider.moveToIdx(
    slider.track.details.rel - slider.options.slides.perView
  );
});
arrowRight.addEventListener("click", function () {
  slider.moveToIdx(
    slider.track.details.rel + slider.options.slides.perView
  );
});

[chz]

Any updates on this feature?

[GephestUA]

I've solved this problem in my case:

<Arrow
          onClick={e => {
            const slider = instanceRef.current;
            e.stopPropagation() ||
              slider?.moveToIdx(
                slider?.track.details.abs +
                  Math.floor(slider?.size / 168) -
                  (isMobile ? 0 : 1),
                true,
                { duration: 1500 },
              );
          }}
        />

[5earle]

Any Feature for Group Slide When Scrolling?