Before and after offset?

[exdeniz]

Please add before and after offset like slidesOffsetBefore and slidesOffsetAfter like swiper.js. It's necessary when the slider is used full width screen and the slides go over the screen. Like slider on this page - http://exdeniz.protechnolog.danke.agency/career/

[rcbyr]

Hey @exdeniz

I think to achieve this behavior, it would be easier to use the slider with these options:

new KeenSlider("#slider", {
  slidesPerView: 2,
  centered: true,
})

Do you agree?

[exdeniz]

No, it's similar behavior, but a little wrong.
I make the first slide offset equal to the global padding container.
I drew a quick layout to explain the idea.

Center slides:

Slider with offset, start position.

Slider with offset, second slide position.

Slider with offset, last slide postion.

[rcbyr]

Hello @exdeniz

okay, I get it now. I'll put it on my list, but I can't tell you when I'm gonna do it. There are some more important features for me right now that need some time. But I hope to give you this feature soon.

[exdeniz]

Hello @exdeniz

okay, I get it now. I'll put it on my list, but I can't tell you when I'm gonna do it. There are some more important features for me right now that need some time. But I hope to give you this feature soon.

Thank you, I understand that there are more important things, such as width:auto for slides. I just hope to find a light version of swiper.js for my projects.

[rcbyr]

@exdeniz

I think I saw this project on reddit. https://github.com/joe223/tiny-swiper

Maybe, you should give it a try, if you look for a swiperjs-like lib.

[sergiodebei]

What about adding an extra empty div as last slide? It might be a quick solution

[exdeniz]

What about adding an extra empty div as last slide? It might be a quick solution
Adding extra slides makes it bad for navigation.

[setianke]

@exdeniz

I achieved your desired behavior with simple CSS:

Give the keen-slider div overflow visible and wrap the slider in a div with padding as desired:

https://codesandbox.io/s/new-frost-xkkm7?fontsize=14&hidenavigation=1&theme=dark

[dhananjaygandhi]

What about one side offset. Like
First Slide

Middle

Last

[rcbyr]

In the new version of keen-slider you can configure the sizes, origins and spacing of each slide separately. So, I think this issue can be closed.

[liqueflies]

Not want to reopen this issue but in the new keen-slider the origin parameter is just a percentage on the viewport.
Is it possible to specify in pixel directly?

[madebyfabian]

@liqueflies I had the same thing. You can specify slides.perView = 'auto' and then give every slide element a min-width and max-width. I used 75vw, but you can also set pixels.

[rcbyr]

Hey @liqueflies

would it be helpful when the origin parameter can be a function?

[arekbartnik]

@rcbyr if the origin became a function would it be possible to pass to it if it is a "looped" slide?
I'm working on a slider in which the first slide is aligned to left and the rest is centered but if I set origin to 0 then all "first" slides will be rendered with this origin.

[timfuhrmann]

@rcbyr If origin could be a function and container size is provided, one could transform the px value into the value related to the container size. Anyways, unfortunately this does not help to achieve inline padding, as the last item would scroll to padding left. Happy to dig in and create a pull request.

Following @setianke's approach does not work for some cases where loop is enabled, since the extra padding is not added to the slider's container size.

[rootEnginear]

Here's a snippet me and my colleague cook today:

const createSlideConfigWithOffset =
	({ perPage = 3, sideOffset = 20, spacing = 8, loop = false } = {}) =>
	(sliderSize: number, slides: HTMLElement[]): TrackSlidesConfigOption =>
		slides.map((_, slideIndex) => {
			const size = (sliderSize - (sideOffset * 2 + spacing * (perPage - 1))) / perPage
			let origin = sideOffset
			if (!loop && slideIndex > slides.length - perPage) {
				origin += (size + spacing) * (perPage - (slides.length - slideIndex))
			}
			return {
				size: size / sliderSize,
				spacing: spacing / sliderSize,
				origin: origin / sliderSize,
			}
		})

Usage:

const [ref] = useKeenSlider<HTMLDivElement>({
	slides: createSlideConfigWithOffset({ perPage: 5, sideOffset: 20, spacing: 10 }),
})

With Looping:

const [ref] = useKeenSlider<HTMLDivElement>({
	loop: true,
	slides: createSlideConfigWithOffset({ loop: true }),
})