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

slidesOffsetBefore as percentage value #2817

Closed
Markao17 opened this issue Oct 2, 2018 · 3 comments
Closed

slidesOffsetBefore as percentage value #2817

Markao17 opened this issue Oct 2, 2018 · 3 comments
Labels

Comments

@Markao17
Copy link

Markao17 commented Oct 2, 2018

I'm trying to use slidesOffsetBefore as a percentage value, cause i have percentage based slides width with loop and slidesPerView: 'auto' and i need to show part of the previous slider.

my code:

var sliderVideo = new Swiper('.swiper-container', {
  slidesPerView: 'auto',
  centeredSlides: true,
  spaceBetween: 30,
  slidesOffsetBefore: '10%',
  loopedSlides: 5,
  grabCursor: true,
  loop: true,
  navigation: {
    nextEl: '.video-slider__next',
    prevEl: '.video-slider__prev',
  },
  breakpoints: {
    // when window width is <= 759px
    759: {
      slidesOffsetBefore: 0,
    }
  }
});

Tried a lot of values and it rests on the left of container. If i set it to 0, it shows a bit of previous slider due to centeredSlides, but not the result i'm looking for.
Can't get it to work and can't find anything about it.

Thanks in advance

@Markao17
Copy link
Author

Markao17 commented Oct 3, 2018

Well after some tries, and for someone who lands here my solution for now was to pass a function to make that calculations. Here's my code:

var sliderVideo = new Swiper('.slider' {
  slidesPerView: 'auto',
  centeredSlides: true,
  spaceBetween: 30,
  slidesOffsetBefore: 0,
  loopedSlides: 5,
  grabCursor: true,
  loop: true,
  navigation: {
    nextEl: '.slider__next',
    prevEl: '.slider__prev',
  },
  breakpoints: {
    // when window width is <= 759px
    759: {
      slidesOffsetBefore: 0,
    }
  }
});

$('.slider').each(function() {
  var sliderWidth = $(this).width();
  var sliderOffset = - (sliderWidth * 21) / 100;
  sliderVideo.params.slidesOffsetBefore = sliderOffset;
  sliderVideo.update();
});

@stale
Copy link

stale bot commented Apr 2, 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the stale label Apr 2, 2019
@stale
Copy link

stale bot commented May 2, 2019

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.

@stale stale bot closed this as completed May 2, 2019
@lock lock bot added the outdated label Dec 28, 2019
@lock lock bot locked as resolved and limited conversation to collaborators Dec 28, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

1 participant