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
merged 1 commit into from Sep 14, 2016

Conversation

Projects
None yet
3 participants
@arthurpf
Contributor

arthurpf commented Jun 30, 2016

#1658

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

@pooledge

This comment has been minimized.

Show comment
Hide comment
@pooledge

pooledge 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): https://www.mosam-arts.com/en/portfolio/snapshots/

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;

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): https://www.mosam-arts.com/en/portfolio/snapshots/

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;

@pooledge pooledge referenced this pull request Apr 23, 2018

Closed

activeIndex miscalculation on screen orientation change #2595

1 of 1 task complete

moyus pushed a commit to moyus/swiper-lite that referenced this pull request Sep 5, 2018

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