Before and after offset? about keen-slider HOT 15 CLOSED

@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

from keen-slider.

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.

from keen-slider.

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?

from keen-slider.

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?

from keen-slider.

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.

from keen-slider.

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.

from keen-slider.

@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.

from keen-slider.

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

from keen-slider.

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

from keen-slider.

What about one side offset. Like
First Slide

Middle

Last

from keen-slider.

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.

from keen-slider.

@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.

from keen-slider.

Hey @liqueflies

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

from keen-slider.

@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.

from keen-slider.

@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.

from keen-slider.