Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Centre mode #460

Open
SukhKalsi opened this issue Oct 21, 2016 · 14 comments
Open

Centre mode #460

SukhKalsi opened this issue Oct 21, 2016 · 14 comments
Assignees

Comments

@SukhKalsi
Copy link

Hello

How can i configure Lory to centre the slide?

For example, Slick has an option called 'centerMode' which enables me to show one slide only but with mini previews of the previous and next slide.

Thanks

@nstanard
Copy link
Collaborator

You would probably want to use variable width mode.

@SukhKalsi
Copy link
Author

Hmm not sure how that helps? Lory seems to always position the slides to the hard edge (either left or right depending on direction)

@nstanard
Copy link
Collaborator

Seems like you realize that this isn't an option currently ;)

@SukhKalsi
Copy link
Author

Ha I guess so! So I suppose this is a feature request. What is the effort level required to get this in?

@nstanard nstanard self-assigned this Nov 28, 2016
@curtisblackwell
Copy link

Any plans for this yet?

@curtisblackwell
Copy link

curtisblackwell commented Feb 7, 2017

I figured out a way to accomplish this using CSS.

Let's say you want 3 slides displayed at a time. Each slide is 200px, and there's a 20px gutter b/w slides.

$slideWidth: 200px;
$slideGutter: 20px;

.frame {
  width: ($slideWidth * 3) + ($slideGutter * 2);
}

.slide {
  transform: translateX($slideWidth + $slideGutter);
  width: $slideWidth;

  + .slide {
    margin-left: $slideGutter;
  }
}
lory(slider, { infinite: 3 });

It's not ideal, b/c it doesn't work w/o infinite (can't focus on last two), but it'll do for now on this project.

@Sandstedt
Copy link

Sandstedt commented Aug 21, 2017

I manage to use some of you css @curtisblackwell but solved it a little different.

.slide {
  width: 60vw;
  transform: translateX(33.333%); // center slide
  margin-left:10px;
  margin-right:10px;
}

@octojoerg
Copy link

Any way to center slides if you don't know how much slides you have?

@nishantuie
Copy link

nishantuie commented Jun 13, 2019

If you are ok to update lory.js code, I have updated the code to add centerMode functionality.

I have added an option for centerMode with

  1. the first slide center align
  2. the first slide left align

https://github.com/nishantuie/lory/tree/feature/center-mode

PR Raised: #763

@Ankitpatel08
Copy link

If you are ok to update lory.js code, I have updated the code to add centerMode functionality.

I have added an option for centerMode with

  1. the first slide center align
  2. the first slide left align

https://github.com/nishantuie/lory/tree/feature/center-mode

PR Raised: #763

This fix works with all type of slides like variable width and in all breakpoints. Thank You! (y)

@mikailbayram
Copy link

mikailbayram commented Dec 9, 2019

Any update on this?

@nishantuie
Copy link

nishantuie commented Dec 9, 2019

Any update on this?

@mikailbayram please take a look at PR #763

@Saturate has reviewed and approved PR, he shall merge feature branch to master. Meanwhile, feel free to get code from https://github.com/nishantuie/lory/tree/feature/center-mode

Hope this helps.

@mikailbayram
Copy link

@nishantuie thanks for the update!

@GiancarlosIO
Copy link

👀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

9 participants