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

adding normalize option #1766

merged 1 commit into from Sep 14, 2016


Copy link

@arthurpf arthurpf commented Jun 30, 2016


I've just added the option normalize to let you activate another slide when you click it and the all slides are in viewport. It's is useful when using 2 Swipers, one as pagination.
When using centeredSlides it's already doing, but it solves the trick when it's not.

@nolimits4web nolimits4web merged commit ccb8441 into nolimits4web:master Sep 14, 2016
Copy link

@pooledge pooledge commented Apr 23, 2018

I somehow still have an issue with that. Whenever screen orientation is being changed, the active index is wrong. Here is a live example (I've added some debug on slideChange and resize):

This is when it's happening:

  1. Start with portrait (both swipers are in viewport)
  2. Swipe a couple of times (both swipers stay in sync regarding active index)
  3. Now switch to landscape (notice the active index jump!), logical side effect: lazy images of the sudden new index are not loaded, coz why should they ;)
  4. Swipe any direction on the top swiper
  5. Change orientation again (another active index jump occurs)

Using debug I can see, that before actual on: resize event occurs, the active slide is miscalculated and the miscalculation is being spread across both afterwards:

-- swiped to slide 10 --
SLIDE_CHANGE! Thumbs slider index: 10
SLIDE_CHANGE! Main slider index: 10
-- rotated screen --
SLIDE_CHANGE! Thumbs slider index: 5 <-- y tho?
RESIZE! Main slider index: 10
SLIDE_CHANGE! Main slider index: 5
RESIZE! Thumbs slider index: 5

Initialization (had to uglify):

albumGalleryTop = new Swiper('.album-gallery-top', { preloadImages: false, lazy: { loadPrevNext: true, preloaderClass: 'tri-preloader' }, autoHeight: true, hashNavigation: { watchState: true }, keyboard: { enabled: true, }, navigation: { nextEl: '.album-gallery-arrow-next', prevEl: '.album-gallery-arrow-prev', }, speed: animation_duration, on: { resize: function() { console.log('RESIZE! Main slider index: ' + this.activeIndex); }, slideChange: function() { console.log('SLIDE_CHANGE! Main slider index: ' + this.activeIndex); } } }); albumGalleryThumbs = new Swiper('.album-gallery-thumbs', { hashNavigation: { watchState: true }, speed: animation_duration, centeredSlides: true, touchRatio: 0.2, slideToClickedSlide: true, slideClass: 'swiper-slide-preview', slideActiveClass: 'swiper-slide-preview-active', slidesPerView: 'auto', on: { resize: function() { console.log('RESIZE! Thumbs slider index: ' + this.activeIndex); }, slideChange: function() { console.log('SLIDE_CHANGE! Thumbs slider index: ' + this.activeIndex); albumGalleryTop.updateAutoHeight(animation_duration); } } }); albumGalleryTop.controller.control = albumGalleryThumbs; albumGalleryThumbs.controller.control = albumGalleryTop;

moyus pushed a commit to moyus/swiper-lite that referenced this pull request Sep 5, 2018
@lock lock bot added the outdated label Dec 19, 2018
@lock lock bot locked as resolved and limited conversation to collaborators Dec 19, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants
You can’t perform that action at this time.